vuex 使用详解

详细可以参考

Vuex的理解

定义：Vuex是一个专为Vue.js应用程序开发的状态管理模式。Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，它采用集中式储存管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

使用场景：在我们开发一个中大型项目时，这时就用到了Vuex，因为在组件中有很多兄弟组件之间的通信，很繁琐。这样的话我们就把数据都存放在Vuex中，A1、A2、A3组件需要数据的话都去Vuex里面去拿，这样的话就不用组件之间的通信了

优点：在state中定义了一个数据之后，可以在任何一个组件里进行获取、进行修改、并且你的修改可以得到全局的响应变更。

Vuex的运行机制：Vuex提供数据（state）来驱动试图（vue components），通过dispath派发actions，在其中可以做一些异步的操作，然后通过commit来提交mutations，最后mutations来更改state。 白话：在组件中通过dispath派发actions，然后在actions中通过context.commit提交到mutations，在mutations中完成对store的修改。store中的数据只能由mutations来修改

核心： ①state： 存储数据的地方，类似一个仓库 ②mutations：同步操作，只有mutations才可以修改state中的数据 ③actions：异步操作，其实就是调用mutations里面的方法。 ④module：面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。模块化 modeA, modeB，modeC ⑤getters：是state的计算属性。

Vuex的映射：

state（数据）、getters（计算属性）需要映射在computed实例中，而mutations（同步操作放法），actions（异步操作方法）等需要放在methods实例中

computed:{ ...mapState([ "list", ]) } methods:{ ...mapMutations([ "changes", ]) }

语法糖辅助函数

语法糖，四大金刚辅助函数：mapState,mapActions,mapMutations,mapGetters当一个组件需要多个状态是，这些状态都声明成计算属性过于冗长。于是有了辅助函数 import {mapState,mapGetters,mapActions,mapMutations} from 'vuex' computed:{ ...mapState({ a:"a", // "a" 指的是state中的a b:"b" }), ...mapGetters({ Val:'newVal' // 可以重新命名 }) } methods:{ ...mapActions({ getSync:'getSyncNum' }) ...mapMutations({ increament:"increament" }) } template {{a}} {{b}} {{getSync(1)}} <button @click='increament(1)'></button>

modules 模块化管理数据

状态树结构复杂的时候，可以用modules进行管理。多人协同开发，可以用modules，避免命名空间冲突。 //创建store，分模块定义 const test1 ={ namespaced:true, //开启命名空间，在各组件总 ...mapState("test1",{name:"name"}) state:{name:'test1'}, actions:{}, mutations:{ changeName(state,arg){ state.name=arg; }, getters:{} } const test2 = { namespaced:true, state:{}, actions:{}, mutations:{ } }, getters:{} } new Vuex.Store({ state:{name:"root"}, actions, mutations, getters modules:{ test1, test2 } }) 在组件中使用： {{this.$store.state.name}} {{name}} {{this.$store.state.test1.name}} {{tes1Name}} computed:{ ...mapState({ name:“name" }), ...mapState('test',{ test1Name:'name' }) } methods:{ ...mapMutations('test1',['changeName']) }

备注

...mapState("test1',['name']) ...mapState('test1',{newName:'name'}) 如果展开数组，组件中不可以重命名， 如果展开时对象，可以重命名