Vuex简单入门

vuex是一个专门为vue.js设计的集中式状态管理架构，可用于数据的储存与组件之间的通信。

创建store

每一个 Vuex 应用的核心就是 store（仓库）,在store中定义了存放数据的state和操作数据的方法。
新建store.js文件并定义基础的store,这里存放了一个msg变量。

export default{
    state : {
        msg : 'hi'
    }
}

注册store

在创建store之后，首先需要注册store，在实例化vue对象时加入store,在store中引入vue和vuex

//main.js
import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

除了全局注册外，还可以注册模块，注册方法为：registerModule( 模块名, 引入的store实例)

<script type="text/javascript">
    import store from './store';

    export default {
        created: function () {
            this.$store.registerModule('name', store);
        }
    }
</script>

注册store之后，在这个组件以及组件的所有子组件中，都可以直接调用store，不需要重复引入，因此store通常在根实例注册。

State

state是vuex的核心概念之一，所有的数据都存放在state对象中，state中的数据需要使用计算属性获取，以上面定义的store为例，想要拿到定义的msg

computed : {
    msg : function(){
        //全局
        return this.$store.state.msg
        //模块
        return this.$store.state.name.msg 	//name为注册时的命名
    }
}

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

export default{
    state : {
        num : 0
    },
    mutations : {
        add(state, n){
            state.num += n
        }
    }
}

在mutation对象中定义的方法有两个参数，state对象和提交时传入的参数，需要在组件中提交mutation方法时

this.$store.commit('add', 1);

对于对象属性的赋值，建议使用Vue.set方法，确保可以监听到数据对象的变化，我在其他文章中有关于这一点的介绍‘Vue汇总’

Action

通常异步操作和请求都是放在action中，此外，action中定义的方法可以通过commit mutation的方法来改变state中的数据。

export default{
    state : {
        num : 0
    },
    mutations : {
        _add(state, n){
            state.num += n
        }
    }，
    action : {
        add( {commit}, n){
            commit('_add', n);
        }
    }
}

在action中定义的方法也有两个参数，第一个参数为当前的store对象，这里使用了参数解构的写法来获取到了param.commit，也可以写作

add( context, n){
    context.commit('_add', n);
}

在调用时，使用dispatch方法

this.$store.dispatch('add', 1);

Vue.set(state, 'obj', data);

Getter

在从state中获取数据时，可能会需要进行数据的过滤或者格式化，getter的作用类似与计算属性

export default{
    state: {
        names: [
            { id: 1, name : 'zhangsan' },
            { id: 2, name : 'lisi' }
        ]
    },
    getters: {
        getNames: state => {
            return state.names.map(item => item.name);
        }
    }
}

定义的getter会暴露为 store.getters 对象，获取方式类似state

computed : {
    names : function(){
        return this.$store.getters.getNames 	//name为注册时的命名
    }
}