vuex的简单使用State Getters Mutations Actions

官方解释什么是vuex？】Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex是解决vue组件和组件间相互通信而存在的，vuex理解起来稍微复杂，但一旦看懂则非常好用。

首先我们先在我们项目安装vuex（项目初始化选了vuex，则跳过此步骤）

yarn add vuex

在src下创建store文件夹，创建index.js（演示我就放到一个文件里，如果数据比较多或者感觉文件比较乱，可以把四个状态分别挪出去，然后用store.js组装）

注：vuex的四大金刚介绍下

State        储存初始化数据

Getters     对State 里面的数据二次处理（对数据进行过滤类似filter的作用）比如State返回的为一个对象，我们想取对象中一个键的值用这个方法

Mutations  对数据进行计算的方法全部写在里面（类似computed） 在页面中触发时使用this.$store.commit('mutationName') 触发Mutations方法改变state的值

Actions      处理Mutations中已经写好的方法 其直接触发方式是 this.$store.dispatch(actionName)

在main.js里引入，方法和路由文件的引入一样

注：一定要将store注入到组件中

State的简单使用

Mutation的简单使用

this.$store.commit("store中mutations定义的方法名")

Action的简单使用

this.$store.dispatch("store中actions定义的方法名")

Getter的简单使用

注：这里我控制count不能小于0

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。