前端vue项目开发全家桶之vuex

Vuex 是一个专为 Vue.js 设计的状态管理模式

vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件共享状态时，会需要：

多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。这需要你去学习下，vue编码中多个组件之间的通讯的做法。
来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

以上的这些模式非常脆弱，通常会导致无法维护的代码。来自官网的一句话：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的，而现在有了vuex，就组件就都和store通讯了。问题就自然解决了。

这就是为什么官网再次会提到Vuex构建大型应用的价值。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。

Vuex.Store

state 进行组件共享数据的集中存储 {}
getters 原理computed 用于返回最新的数据值 {计算属性写法}，放的是对象里面的函数，只能使用state数据，不能修改
mutations - 唯一一个能够修改state里面数据的地方－（函数）－不能做异步，放的是对象里面的函数，此时state里面存放的就是修改后的新的数据，同步操作
actions 处理异步请求－异步调用mutations函数
modules 模块 当数据比较多的情况下，而且数据之前没什么关系 用模块划分，每一个模块对象都包含以上4部分

语法糖方法对象-辅助某些方法函数在语法上更好的去使用和获取的：
mapState -是state的语法糖对象
mapGetters -是getters的语法糖对象
mapActions -是actions的语法糖对象
commit 在组件内同步调用mutations方法，就是这个函数你封装好了，可以直接在组件内通过commit调用
dispatch 异步调用actions方法

使用vuex，首先需要先安装vuex的依赖

vuex与路由一样都是vue的全家桶，所以在src目录下简历一个store文件夹(存储vuex的方法)与router同级，且使用方法与router完全一样，router就是导入vue导入router，挂载并暴露实例化对象。

1、在store的index下写入：

2、建立5大文件，方便管理

3、在5大部分中都需要将内容暴露出来，并在index中接过来，给到store对象。5个文件均像如下这样写。

4、在store中的index页面中导入并接收

5、在主文件中将store引入并挂载，和路由完全一样

6、在state里面写一个数据

7、找一个组件去使用这个数据

使用成功

8、如何修改state里面的数据，mutations可以实现，这是因为mutations里面存在一个形参state直接指向state。先在一个组件中声明一个按钮添加点击事件

通过commit方法同步调用mutations方法，里面跟上函数名即可

点击加1