vue vuex 大型项目demo示例

1、vuex 动态模块配置

import Vue from 'vue'
import Vuex from 'vuex'
import store from '@/store';
 
// 使用Vuex插件，即使插件被调用多次，插件也只会安装一次
Vue.use(Vuex);
 
// state存储数据的状态
const state = {
 
  // 数据状态
  name: 'mfg'
}
 
// getters获取数据状态
 
const getters = {
 
  // 可以使用store.getters.myName获取数据
  myName: state => {
    return state.name
  }
}
 
// mutations更改数据状态的唯一方法
const mutations = {
 
  // 每个mutations都有一个事件类型type和回调函数。下面代码type为editName，回调函数即完成数据更改。
  // agr为参数
  editName(state, arg) {
      state.name = arg;
  }
}
 
// actions提交的是mutation，处理的异步操作
const actions = {
 
  // 传递的参数为arg
  editNameAction({ commit, state }, arg) {
    commit('editName', arg)
  }
}
 
// registerModule，在 store 创建之后，注册模块
// 模块动态注册功能可以让其他vue插件使用注册好的新模块
store.registerModule('myNameSpace', {
 
  // 命名空间，模块具有更高的封装度和复用性
  namespaced: true,
  state,
  mutations,
  getters,
  actions
})

或者组件注册：

<script>
import storeIndex from '../protect/store'
import store from '@/store'
 
export default {
  name: 'intelligence',
  beforeMount() {
      //组件注册store的命名空间
    store.registerModule('intelligence', storeIndex)
  },
  destroyed() {
      //组件销毁store的命名空间
    store.unregisterModule('intelligence')
  }
}
</script>
 
/protect/store文件：
export default {
  namespaced: true,
  modules: {
    common,
    workflow,
    configfile,
    sysdetail,
    unitdetail
  }
}

2、vue单文件demo

<template>
  <div>
    <!-- 使用mapState获取数据状态 -->
    <p>{{name}}</p>
    <!-- 使用mapGetters获取数据状态 -->
    <p>{{myName}}</p>
    <!-- 使用mapMutations更改数据状态 -->
    <el-button @click="edit('abc')">修改名字</el-button>
    <!-- 使用mapActions更改数据状态 -->
    <el-button @click="edit2('def')">修改名字2</el-button>
  </div>
</template>
<script>
 
import sti from 'commons/sti';
import './store';
 
// 辅助函数mapMutations, mapActions, mapGetters, mapState
import { mapMutations, mapActions, mapGetters, mapState } from 'vuex';
 
export default sti.page({
  computed: {
 
    // 使用对象展开运算符将此对象混入到外部对象中
    // 第一个参数为模块上下文myNameSpace
    ...mapState('myNameSpace', {
      name: state => state.name
    }),
 
    // 使用对象展开运算符将此对象混入到外部对象中
    // 第一个参数为模块上下文myNameSpace
    ...mapGetters('myNameSpace', ['myName'])
  },
 
  data() {
    return {}
  },
 
  methods: {
 
    // 第一个参数为模块上下文myNameSpace
    ...mapMutations('myNameSpace', ['editName']),
 
    // 第一个参数为模块上下文myNameSpace
 
    ...mapActions('myNameSpace', ['editNameAction']),
 
    // 也可以这样写
    // ...mapActions(['myNameSpace/editNameAction']),
    edit(arg) {
 
      // 更新数据状态
      this.editName(arg);
    },
    edit2(arg) {
 
      // 更新数据状态
      this.editNameAction(arg);
    }
  },
 
  mounted() {}
});
</script>

在mutations中可以将type设置为常量

const mutations = {
 
  [types.THEME_UPDATE](state, theme) {
    state.appTheme = theme
  }
}

const actions = {
 
  updateTheme: ({commit}, theme) => {
    commit(types.THEME_UPDATE, theme)
  }
}

3、严格模式

const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})

在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。