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'

})