一、为什么使用vuex(或者是和某种方式对比为什么选择用vuex)

1.产生的原因(或者解决了vue什么痛点):vuex设计的初衷就是为了解决Vue中单项数据流的问题,就是只有父子组件之间才能进行通信传值,这样复杂的通信过程会变得繁琐。

2.作用:可以完成组件之间的复杂通信,做状态统一管理

3.优势:

  1、易通信。相对于纯使用父子组件的通信方式,避免了祖孙组件通信和兄弟组件通信时多个组件都要参与带来的麻烦。

  2、响应式。相对于全局变量式的状态管理,vuex 的状态存储是响应式的。store 中状态发生改变,相应的组件也会相应地得到高效更新;

       3、易追踪。store 中的状态不能直接更改,唯一途径就是显式地提交 (commit) mutation。这样可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地 了解我们的应用

二、vuex的基本使用步骤

1.创建公共仓库(store文件夹):src中创建store文件夹并在文件夹中创建index.js文件;

2.index.js文件中导入vue和vuex,通过Vue.use(Vuex)的显示声明方式来使用Vuex,声明基本的模块(包括state,actions,mutations,getters),创建store实例并导入模块,最后默认导出store(需要细分层);

3.在main中导入store并挂载到根实例中。

4.在需要通信的组件中导入辅助函数并获取状态信息。

三、vuex注意事项

1.vuex中的状态值,不能通过赋值的方式(state.xxx = yyy)改变,需要通过mutation触发变更,这样做方便状态管理,而一般的全局变量是支持直接赋值的;

2.state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.如果你用data去接收$store.state,当然可以接收到值,但由于这只是一个简单的赋值操作,因此state中的状态改变的时候不能被vue中的data监听到;

3.mapState主要用在computed计算属性中,配合展开运算符实现状态值的监控;

4.vuex的出现是为了解决组件间的通信问题,如果你的操作或者数据不涉及到公共操作,只是单一组件操作,请务必不要把这些状态值或者function存储到vuex中,因为vuex会把自身挂载到所有组件上,不管当前组件是否用到里面的东西,因此这事实上肯定增加了性能的损耗,注意是肯定,因为你很难保证每个子组件都用到同一个状态

5.

最后说一下mutation的使用场景,mutation在使用的是请不要涉及任何异步操作,如果你想改变count的值,你通过mutation中的两个异步事件,都改变了这个状态值,你怎么知道什么时候回调和哪个先回调呢,因此mutation用于管理同步事件,如果有异步操作,请用action.