vuex 使用简介

下面用一个小的例子开始。

一、创建独立的state singleModule文件，如count.js，内容如下

export default {
  /** 初始状态 */
  state: {  count: 0 },
  /** 
   *mutations ( 类似redux中的reducer， 表示了对状态state造成的影响 )  函数内不能出现异步操作
   *直接修改state的值 reducer是返回一个新的state对象
   */
  getters: {
    count: state => state.count
  },
  /**
   * 方便获取state中的值 或者获取处理值
   */
  mutations: {
    ADD_ONE(state)
    {
      state.count += 1;
    },
    SET_VAL(state, order)
    {
       const _order = Object.assign({ count: state.count }, order || {});
       state.count = _order.count;
    }
  },
  /** 对mutations的引用（ 可进行异步操作，回调mutations ） */
  actions: {
     _ADD_ONE: ({ commit }, order) => commit('ADD_ONE')，
    _SET_VAL: ({ commit }, order) =>
    {
         $.ajax({ ....}).done(result =>{ commit('SET_VAL', result.data) });
    }，
    _SET_VAL_THEN: ({ commit }, order) => {
      return new Promise((resolve, reject) =>
        $.ajax({ ....}).done(result =>{ commit('SET_VAL', result.data); resolve(result.data) });
      });
    }
  },
  /** 独立命名空间 建议总是使用（ 使用后在对getters actions state的获取时 ） */
  namespaced: true
}

二、初始化store

import Vue from 'vue';
import Vuex from 'vuex';
import count from 'count';

export default new Vuex.Store(
{
  modules:
  {
    _count: count    //  _count 为此modules名 获取state等信息时需要
  }
})

三、初始化app时挂载

import App from 'App';
import Vue from 'vue';
import store from 'store';
import router from 'router';

new Vue({
   store,
   router,
   template: '<APP/>',
   render: h => h(App)
}).$mount('#app')

四、调用

<script>
  // 组建中调用
  import Vue from 'vue';
  export default Vue.extend(
  {
   computed: {
      ...mapGetters('_count', [ 'count' ])  // 获取_count模块中count-getter
         //  同...mapState('_count', [ 'count' ])
    },
    methods:{
      ...mapActions('_count', { 'addOne': 'ADD_ONE'; 'setVal': '_SET_VAL' }) // 获取并重命名
    }
  })

  // 非组件中调用( 设置了命名空间后的调用方式自己猜测出来的 得瑟ing )
  import store from 'store';
  store.dispatch('_count/ADD_ONE');
  store.dispatch('_count/_SET_VAL', { count: * })
</script>

summary:

总体来说比react中redux容易很多。掌握理解state store actions即可。