Vuex总结

Vuex 总结

Vuex是专为vue.js开发的状态管理模式+库，也是实现组件之间通信的一种手段，当项目很大时，组件和组件之间层层嵌套，原始的传值方式十分繁琐，这就用到了Vuex，用来作为外部仓库
Vuex实例内部有state，actions，mutations，getters

1.state

内部存放公共的一些数据，相当于数据的仓库，但要对state内部的数据进行修改，只能在Vuex内部的mutations中进行，组件中只能通过$store.state.变量名来访问state中的数据，可直接用插值表达式包裹展示到页面

2.actions

actions与mutations类似，actions内部可以进行一些异步操作，比如接口的调用，但actions无法修改state中的数据
可以在组件的methods中，进行actions的分发，通过this.$store.dispatch('actionsName',value)，内部传Vuex中actions对应的名称，还有要传入的值
也可以通过映射的方式，该方法可以一次进行多个action的分发

methods:{
...mapActions(['actionsName'])//内部传入actions中方法名
	method(){
		this.actionsName(value)//在methods中调用方法传递参数
		}
}

在Vuex中，store文件夹下的index.js内部，action提交mutation，mutation去改变数据state,为了区分actions中的方法和mutations中的方法，将mutations中的同名方法采用大写书写
actions中函数有两个参数，context和value，value来自于组件，将传递给mutations

import Vue from 'vue';
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 10,
    },

    mutations: {
        JIA(state, value) {
            state.count += value
        }
    },
    actions: {
        jia: function (context, value) {
            context.commit((JIA, value))
        }
    },
})

3.mutations

mutations直接对state中存储的数据进行操作，可以在组件methods中用this.$store.commit('METHODNAME',value)直接进行操作，当组件并没有一些复杂的异步操作，只是简单的传值改变仓库的状态，可以省略actions分发，直接commit到mutation今昔那个状态的更改
mutations也有…mapMutations这种映射，在组件中可以直接改变state中的数据

methods:{
…mapMutations([‘METHODNAME’]),//可以传多个MUTHODNAME，通过…将其混入methods中
this.METHODNAME(value)//如this.num
}

4.getters

相当于组件中的计算属性computed，可将state中的数值处理后导出，访问方式改变$store.getters.getterName

5.module