vuex初解教程

什么是Vuex？

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

为什么使用Vuex？

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

vuex组成
state:
存放的数据状态

getters：

对state中的状态进行过滤处理

一般处理方法是：
computed: {

count(){
    return this.$store.state.countNum.filter(todo => todo.done).length;
}

},
如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它 —— 无论哪种方式都不是很理想。

Vuex 允许我们在 store 中定义『getters』（可以认为是 store 的计算属性）。就像计算属性一样，getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getters 接受 state 作为其第一个参数：
const store = new Vuex.Store({
state: {

todos: [
  { id: 1, text: '...', done: true },
  { id: 2, text: '...', done: false }
]

},
getters: {

doneTodos: state => {
  return state.todos.filter(todo => todo.done)
}

}
})
Getters 会暴露为 store.getters 对象：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Mutations:
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
mutation中写有修改数据的逻辑。

Actions:

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

代码示例:

代码总结构

action.js

mutation_type.js

mutations.js

store.js

最后在main.js中引入

页面使用
this.$store.state.countNum.xx//获取状态中的某个字段
this.$store.dispatch('action中的方法名' , '参数');//修改状态中的字段值