Question

嗨，我是vue和vuex的新手。

我已经在商店中发布了一些数据，并且需要根据用户选择修改其嵌套数组属性。我试图在商店中使用“操作”，但是当我使用“ this。$ store.dispatch”时，出现“未捕获的TypeError：state.storyInfo.push不是函数”。如果我使用“ this。$ store.commit”直接提交“ mutations”，则会得到未修改的原始状态。

这是我的状态下的数据：

groupBy (on (==) isDigit)

例如，如果用户选择id = 2的情节，我希望状态变为：

{
  "id": 1,
  "title": "Story title",
  "episodes": [
    {
      "id": 1,
      "title": "Episode 1"
    },
    {
      "id": 2,
      "title": "Episode 2"
    },
    {
      "id": 3,
      "title": "Episode 3"
    }
  ]
}

我的store.js看起来像这样：

{
  "id": 1,
  "title": "Story title",
  "episodes": [
    {
      "id": 2,
      "title": "Episode 2"
    }
  ]
}

组件中的方法如下：

export const store = new Vuex.Store({
  state: {
    storyInfo: null
  },
  mutations: {
    setStory (state, payload) {
      state.storyInfo = payload
    },
    addInfoToStory (state, payload) {
      const data = this.state.episodes
      state.storyInfo.push(data)
    }
  },
  actions: {
    addToStory (infoToAdd, payload) {
      infoToAdd.commit('addInfoToStory', payload)
    }
  },
  getters: {
    selectedStoryInfo: state => state.storyInfo
  }
})

我还尝试改编了一些在线上找到的TODO示例，但我似乎无济于事。

我在做什么错了？

Answer 1

在store.js，您将storeInfo初始化为null。

push是仅适用于数组的方法，因此不适用于null变量。

尝试将storeInfo设置为空数组：

export const store = new Vuex.Store({
  state: {
    storyInfo: []
  },

  ...

Answer 2

发布我自己的解决方案。在商店中，将“ addInfoToStory”变异替换为需要更改的故事路径：

addInfoToStory (state, payload) {
  state.storyInfo.episodes = payload
}

这只会修改状态中的该属性。

如何使用vuex仅修改存储中的嵌套数组属性

2 个答案: