我应该将状态初始化代码放在 Vuex 的哪里？

Question

Vuex 是否应该只保留状态结构的代码以及如何修改该状态（突变、动作），或者还保留实际的状态初始化和值？

当我的状态初始化代码变得更加复杂时，我开始怀疑它，因为我没有看到 Vuex 架构中有任何自然的地方可以放置此代码。

假设我有这样一家商店：

export default {
  state: {
    list: []
  },

  mutations: {
    addItem(state, { item }) {
      state.list.push(item);
    }
  }
}

如果列表开始为空，就足够了。但是，如果我有列表的默认值并且还想将列表存储在 LocalStorage 中，这样我就可以在页面加载之间保留它的值。

const STORAGE_LIST_KEY = 'list';

const LIST_DEFAULT = [
  {
    id: 1,
    name: 'item 1'
  },
  {
    id: 33,
    name: 'item 33'
  }
];

function initializeList() {
  let savedList = localStorage.getItem(STORAGE_LIST_KEY);
  return savedList ? savedList : LIST_DEFAULT;
];

Vuex store 架构中是否有一些自然的地方，我应该在哪里放置initializeList() 函数？ （例如，在 Vue 组件中，我会将 initializeList() 放入组件的 methods 部分）或者存储只是关于结构而初始化代码属于 Vue 组件？

Answer 1

您的初始化状态将是某种突变或动作，具体取决于异步和副作用的需要。此操作应在初始化期间仅触发一次。

然后将从根实例或足够更高级别的组件触发此突变/动作。您还可以将整个应用程序状态的初始化拆分为更小的变更或操作。

这种方法的优点是您可以拆分 Vuex 存储并动态加载 Vuex 模块（延迟加载）。

在您的情况下，由于您希望从本地存储中膨胀/缩小状态（这是一个副作用），因此采取行动是有意义的。