vuex，vue的状态管理模式（1）

vuex是vue配套的公共管理数据，可以在多个组件之间保持一致的数据。我们可以将共享的数据保存到vuex中。以后在任何组件中都可以获取和修改vuex中保存的公共数据了。

 

1. store{} // 贮存，用于保存共享数据，相当于vue中的data。

在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules。

总结：Store类就是存储数据和管理数据方法的仓库，实现方式是将数据和方法已对象形式传入其实例中。要注意一个应用或是项目中只能存在一个Store实例！

 

vuex中，在模块里写了相同的方法，如何区分？

state里添加--->>> namespaced: true, 告诉vuex，该模块所有的state 、getters、mutations、actions里面的东西调用时都需要加上命名空间，这个命名空间就是该模块被improt时命名的名字。

 

2. mutations{同步}  // 改变或者转变，修改vuex管理的状态必须用mutations，相当于methods。

3. actions{异步}  // 行动，actions也对应于methods。

4. getters{}  // 获取，getters就相当于vue中的computed属性，会将数据缓存起来，只有数据发生变化才会重新计算。

5. modules{}  // 模块，购物车模块，用户模块。

 

const store = new Vuex.Store({

namespaced: true, //命名空间为:true

    state:{

// 这里的state就相当于组件中的data，就是专门用于保存共享数据的

       msg: 0 

     }

})

 

vuex状态管理流程：

用户通过 dispatch( )触发actions， actions通过 commit 提交 mutations，

mutations 改变 state 的状态，state 改变重新渲染组件。

 

通过 this.$store.commit('') 可知直接操作mutations的。mutations是同步操作。