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
}
}

<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>

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

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

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