vuex

kailian 2019-04-14

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

文档vuex.vuejs.org

vuex方法

  • state 单一状态树
  • Getter 获取最新状态方法
  • Mutation 存放更改状态的方法，mutation 必须是同步函数，使用 this.$store.commit(‘xxx’) 提交 mutation
  • Action 通过commit mutations的方法改变状态，支持异步
  • Module 状态管理模块化

vuex使用示例

vuex-1.png

左侧导航的菜单是一个子组件，右侧配置表单是另一个子组件，菜单的内容需要在配置修改的时候刷新为新数据

方案1 父子组件通信，需要将子组件数据传递给父组件，父组件再传递给导航子组件

方案2 vuex全局状态管理，把组件的共享状态抽取出来，以一个全局单例模式管理，不管在哪个组件，都能获取状态/触发行为

vuex/types.js 定义常量方法

export const SET_REFRESH = 'SET_REFRESH';
export const SET_REFRESH_ACTION = 'SET_REFRESH_ACTION';

vuex/modules/publishMenu.js

import * as types from '../types.js';

// 设置的全局访问的state对象，初始值
const state = {
  refreshMenu: false
};

// mutations 改变state的初始值的方法，用常量替代 Mutation 事件类型
const mutations = {
  [types.SET_REFRESH](state, status) {
    state.refreshMenu = status;
    return state.refreshMenu;
  }
};

// action方法 可以包含任意异步操作，Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，调用 context.commit 提交一个 mutation
const actions = {
  [types.SET_REFRESH_ACTION](context, status) {
    return context.commit(types.SET_REFRESH, status);
  }
};

const getters = {
  getMenuState(state) {
    return state.refreshMenu;
  }
};

export default {
  state,
  actions,
  getters,
  mutations
};

vuex/store.js

// modules 模块化
import publishMenu from './modules/publishMenu.js';

export default{
  modules: {
    publishMenu
  }
};

main.js

main.js里面引入store，全局注入，store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到

import stores from './vuex/store';
Vue.use(VueX);
const store = new VueX.Store(stores);
new Vue({
  router,
  store,
  ...App
}).$mount('#app');

config.js 配置子组件，配置改动后，调用this.setRefreshAction(true)将状态state.refreshMenu改为true

import * as types from '../../vuex/types.js';
import {mapState, mapActions} from 'vuex';
export default {
  computed: {
    // 映射 this.refreshMenu 为 store.state.publishMenu.refreshMenu
    ...mapState({
      refreshMenu: state => state.publishMenu.refreshMenu
    })
  },
  methods: {
    // 映射this.setRefreshAction 为 this.$store.dispatch(types.SET_REFRESH_ACTION)
    ...mapActions({
        'setRefreshAction': types.SET_REFRESH_ACTION
    }),
    addVersionConfig() {
      // 更新配置，然后调用action修改状态
      this.setRefreshAction(true);
    }
  }

nav.js 导航子组件，监听state.refreshMenu的状态变化，true触发更新导航配置，更新后把state.refreshMenu设为false

import * as types from '../../vuex/types.js';
import {mapState, mapActions} from 'vuex';
export default {
  name: 'mainPublish',
  computed: {
    ...mapState({
      refreshMenu: state => state.publishMenu.refreshMenu
    })
  },
  mounted() {
    this.getOption();
  },
  methods: {
    ...mapActions({
      'setRefreshAction': types.SET_REFRESH_ACTION
    }),
    getOption() {
      // 获取配置更新导航
    }
  },
  watch: {
    // 监听状态配置，判断状态为true，更新导航配置，否则不更新
    refreshMenu(val) {
      if (val) {
        this.getOption();
        this.setRefreshAction(false);
      }
    }
  }
};
web64