使用场景

多组件、父子组件、多层组合间状态共享,解决多层组件享用一个属性时的无限套娃行为

vue-cli中vuex的一种使用风格

• 创建[src/store/modules]目录并创建js文件

// fileName:kpi.jsexport default {  name:'kpi',  namespaced: true,  state: {    targetFlag: false  },  mutations: {    updateTargetFlag(state, targetFlag) {      state.targetFlag = targetFlag    },  },  getters: {    targetFlag: state => state.targetFlag,  }}

• 创建[src/store/index.js]文件(注册)

import Vue from 'vue'import Vuex from 'vuex'import cloneDeep from 'lodash/cloneDeep'import kpi from "./modules/kpi";Vue.use(Vuex)export default new Vuex.Store({  modules: {    kpi,  },  mutations: {    // 重置vuex本地储存状态    resetStore (state) {      Object.keys(state).forEach((key) => {        state[key] = cloneDeep(window.SITE_CONFIG['storeState'][key])      })    }  },  strict: process.env.NODE_ENV !== 'production'})

• [src/main.js]中进行全局挂载

/** 只保留相关代码 **/import Vue from 'vue'import App from '@/App'import router from '@/router'                import store from '@/store'                  import cloneDeep from 'lodash/cloneDeep'// 保存整站vuex本地储存初始状态window.SITE_CONFIG['storeState'] = cloneDeep(store.state)/* eslint-disable no-new */new Vue({  el: '#app',  router,  store,  template: '<App/>',  components: {App}})

vuex组件间通讯(状态的设置与获取)

• 利用computed计算属性触发对状态的管理

computed: {  targetFlag: {    get() {      return this.$store.state.kpi.targetFlag    },    set(val) {      this.$store.commit('kpi/updateTargetFlag', val)    }  }},/** 当给targetFlag赋值时会调用计算属性的set方法,从而实现对状态的更新 **/ this.targetFlag = (this.template && this.template.targetFlag) ? true : false