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中的方法名' , '参数');//修改状态中的字段值