Vuex

Posted on Edited on

五大件

state,actions,mutations,getter,modules

区别

state: 主要存放用户数据
mutations: set 用户数据(同步形式)
actions: 主要是异步操作,通过 commit  触发 mutations 中的操作改变 state
getters: change 用户数据(经常性的)
modules: 将近似的操作抽离放到一个模块里,防止 store 过于臃肿.

Vuex 中 action 的{commit}的理解

1
2
3
4
5
6
7
8
9
10
actions: {
    increment (context) {
      context.commit('increment')
    }
  }
//解构赋值
actions: {
	increment({commit}){
    commit('increment')
  }

理解

context 是默认参数,将 {commit}  从 context 中解构出来.
let { commit } = context 
那么 commit  就是 context  对象中的一个参数,直接赋值调用即可.

1
2
3
4
5
6
7
8
9
10
11
12
13
// options 上的属性表示附加参数
function setCookie(name, value, options) {
  options = options || {};
  let secure = options.secure,
    path = options.path,
    domain = options.domain,
    expires = options.expires;
  // 设置 cookie 的代码
}
//可以改写为：对options进行解构并赋予默认值
function setCookie(name, value, { secure, path, domain, expires } = {}) {
  // ...
}

参数 options 默认有 { secure, path, domain, expires }  参数,
而 options  默认可能空,设置它的默认值为 {} .

state

state 中的数据不能在组件中赋值,必须使用 mutation 改变.

获取 state

  1. 通过属性访问
1
2
3
4
5
6
7
8
9
10
11
import store from "@/store/index.js"; //需要引入store
export default {
  data() {
    return {};
  },
  computed: {
    username() {
      return store.state.username;
    },
  },
};
  1. 通过 this.$store.state  访问.
1
2
3
4
5
computed: {
  username() {
    return this.$store.state.username
  }
}

mapState

1
2
3
4
5
import { mapState } from 'vuex' ... computed: mapState({ username: state =>
state.name, age: state => state.age }) //mapState字符串数组 computed:
mapState(['username','age']) //当要获取组件自己的data数据时,必须使用常规函数
computed: { ...mapState({ username: function(state){ return this.firstName + ' '
+ state.username }, age: state => state.age }) }

Action

可以执行同步和异步.,通过 commit 触发 mutations 中的操作改变 state

分发 Action

  1. 通过 dispatch  分发.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <view>
    <view>{{ count }}</view>
    <button @click="add">click add</button>
  </view>
</template>
<script>
import store from "@/store/index.js";
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
  methods: {
    add() {
      store.dispatch("addCountAction");
    },
  },
};
</script>

mapActions

  1. 通过 mapActions  分发.

使用 mapActions  辅助函数将组件的 methods  映射为 store.dispatch  调用(需要现在根节点注入 store )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <view>
    <view>{{ count }}</view>
    <button @click="addCount">click add</button>
  </view>
</template>
<script>
import { mapAction } from 'vuex';
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    ...mapActions(['addCountAction'])
      //将this.addCountAction映射为this.$store.dispatch('addCountAction')

      //传入参数
      //将this.addCountAction(amount)映射为this.$store.dispatch('addCountAction',amount)

      //传入对象
      ...mapActions({
        addCount: 'addCountActions'
        //将this.addCount()映射为this.$store.dispatch('addCountAction')
      })
  }
}
</script>
  1. 组合 Action

store.dispatch  可以处理被触发 action  的处理函数返回的 Promise ,并且仍返回 Promise .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
store.dispatch('actionA').then(()=>{
  ...
})

//在另一个action中
actions: {
	actionB({ commit, state}){
    return dispatch('actionA').then(()=> {
			commit('someMutation')
    })
  }
}
//使用async/await
  //假设getData()和getOtherData()返回Promise
  actions: {
    async actionA({commit, state}){
      commit('gotData', await getData())
    },
    async actionB({commit, state}){
      await dispatch('actionA') //等待actionA完成
      commit('gotOtherData', await getOtherData())
    }
  }

一个 store.dispatch  在不同模块中可以触发多个 action  函数.在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行.

因为 action 是包含 promise 的,所以在组件中也可以使用 then .

1
2
3
4
5
let payload = {
  username: this.userInfo.username,
  date: new dateFormat().toString("date"),
};
this.getLogList(payload).then(() => this.buildLog());

getters

getters 是 store 中的计算属性.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
list: [
  {
    id: 1,
    name: "商品一",
    status: false,
  },
  {
    id: 2,
    name: "商品二",
    status: true,
  },
  {
    id: 3,
    name: "商品三",
    status: false,
  },
  {
    id: 4,
    name: "商品四",
    status: true,
  },
  {
    id: 5,
    name: "商品五",
    status: false,
  },
];

将上面数组筛选出 status 为 true 的对象.

1
2
// vuex中 getters: { activeList(state) { return state.list.filter(v=>v.status) }
}

在页面中获取的方法

1
2
3
4
<div> {{ $store.getters.activeList}} </div>

//第二种写法 computed(){ list(){ return this.$store.getters.activeList } } //
第三种 computed:{ ...mapGetters(['aciveList']) }