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

Posted 2023-02-23

【中文标题】如何使用 vuex 仅修改存储中的嵌套数组属性

【英文标题】：How to modify only a nested array property in store with vuex

【发布时间】：2019-07-24 15:40:38

【问题描述】：

您好，我是 vue 和 vuex 的新手。

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

这是我所在州的数据：

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

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

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

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

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
  
)

组件中的方法如下所示：

methods: 
  addSelectedEpisode () 
    this.$store.commit('addToStory', this.episode) // <- here if I use dispatch I get the error and no result
  ,
  redirectTo () 
    this.$router.push(name: 'Read')
  

我也尝试修改网上找到的一些 TODO 示例，但我所做的似乎没有任何效果。

我做错了什么？

【参考方案1】：

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

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

尝试将storeInfo 设置为空数组：

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

  ...

【讨论】：

没有任何相关变化。如果我派遣我得到“推送不是功能”。我使用提交我得到原始数据+日志错误：未知突变类型：addToStory。

我已经发布了解决方案。请注意，将 state 中的对象初始化为 null、'' 或 [] 不会有任何区别。

【参考方案2】：

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

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

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