vuex核心和辅助函数

• state 数据源，所有共享的数据都要统一放到store的state中进行存储
  通过this.$store.state.属性名访问
  但是访问次数较多或者state存放数据较多时，重复使用这句会比较繁杂
  可使用mapState辅助函数

import { mapState } from 'vuex'//先从vuex里导入辅助函数
computed: {
	//需要写在conputed里面
	...mapState(['属性名'])，
	//也可以传一个对象进行重命名操作
	...mampState({rename:'属性名'})
}

• getter 用于改变state的值，派生出多个数据源
  ​getter用于对store中的数据进行加工处理形成新的数据，相当于vue的计算属性
  通过this.$store.getters.函数名访问
  接收state为第一个参数，也可以接收其他getter作为其第二个参数

或通过mapGetters辅助函数

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(['getter名'])
    //起另外的名字，用对象方式
	...mapGetters({ rename: 'getter名'})
  }
}

• mutation 唯一可以提交可以改变state的状态，也就是数据的属性值
  只能通过提交mutation变更state里面的数据，不可以直接操作store中的数据，必须是同步操作
  默认接收state作为第一个参数，第二个参数是传递过去的数据
  this.$store.commit('mutation名'，要传递的参数)

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['xxx']),
    ...mapMutations({rename: 'xxx'})
  }
}

• action 类似于 mutation，不同在于：

action 提交的是 mutation，而不是直接变更状态。
action 可以包含任意异步操作。

action 通过 store.dispatch 方法触发：
this.$store.dispatch('xxx',传递的参数)
使用辅助函数

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions(['xxx']),
    ...mapActions({ rename: 'xxx'})//将xxx重命名为rename
  }
}

• modules 拆分成多个模块
  ​当需要管理的状态比较多时，我们需要将vuex的stroe对象分割成模块