vuex 简单入门使用

vuex是什么？

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

vuex的五种状态：

state:存储状态，也就是变量。

getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；

mutations:提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit('SET_AGE', 18)。和vue中的methods类似。

actions:与mutaions类似，不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch('nameAsyn')。

modules: store的子模块，内容就当于是store的一个实列。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。

初始化vuex

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({

    state:{

        count:0

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

                     { id:2, text: '...', done: false } ]

    },    

    getters:{

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

            doneTodosCount: (state, getters) => { return getters.doneTodos.length}

    },

    mutations:{

            add: state => state.count++,

            subtractions: state => state.count--

    },

    actions:{

            increment (context) {

                  context.commit('add')

            }

    },

    modules:{

    }

});

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

未完待续