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商店体系结构中是否存在一些自然的地方，应该放置initializeList()函数？（例如，在Vue组件中，我会将initializeList()放入组件的methods部分中），或者商店只是关于结构而初始化代码属于Vue组件？

Answer 1

根据异步和副作用的需要，您的初始化状态将是某种突变或动作。在初始化期间，该操作应仅触发一次。

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

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

在您的情况下，由于您希望从本地存储中增加/缩小状态（这是副作用），因此有必要采取措施。

我应该将状态初始化代码放在Vuex的什么位置？

1 个答案: