在Vuex模块中添加一个在内部管理其状态的复杂对象

// store/modules/complexObject.js
const complexObject = {
  namespaced: true,
  state: {
    // 在这里定义复杂对象的初始状态
    data: {}
  },
  mutations: {
    // 在这里定义修改复杂对象状态的mutations
    SET_DATA(state, newData) {
      state.data = newData;
    }
  },
  actions: {
    // 在这里定义触发mutations的actions
    updateData({ commit }, newData) {
      commit('SET_DATA', newData);
    }
  },
  getters: {
    // 在这里定义获取复杂对象状态的getters
    getData(state) {
      return state.data;
    }
  }
};

export default complexObject;

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import complexObject from './modules/complexObject';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    complexObject
  }
});

<template>
  <div>
    <p>复杂对象的数据: {{ complexData }}</p>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState('complexObject', ['data']),
    complexData() {
      return this.data;
    }
  },
  methods: {
    ...mapActions('complexObject', ['updateData'])
  }
};
</script>