vuex -持久化不更新vuex状态

Question

我很难弄清楚为什么我的状态在vuex persist中没有改变。部分代码如下所示：

<v-btn
        :disabled="!isEditing"
        color="success"
        @click="save"
>

<v-text-field ref="rowCount"
        :disabled="!isEditing"
        v-model="text"
        autofocus
        color="white"
        label="Number of Rows"
      ></v-text-field>

methods: {
      save () {
        this.isEditing = !this.isEditing
        this.hasSaved = true
        console.log(this.$refs.rowCount.value)
        var payload = {"columns": 9, "rows": parseInt(this.$refs.rowCount.value)}
        this.$store.commit('modifyChunkServerViewBlueprint',payload)
      },
    },

在store.js中，我有：

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersist from 'vuex-persist'

Vue.use(Vuex);

const vuexPersist = new VuexPersist({
  storage: window.localStorage
})

export const store = new Vuex.Store({
  plugins: [vuexPersist.plugin],
  state:{
    chunkServerViewBluePrint: [
      {columns:'2', rows:'8'}
    ]
  },
  mutations:{
    modifyChunkServerViewBlueprint(state, { columns, rows }) {
      state.chunkServerViewBluePrint.columns = columns
      state.chunkServerViewBluePrint.rows = rows
      console.log(state.chunkServerViewBluePrint)
    }
  }
})

在控制台中，我可以看到在单击触发save()方法的按钮时chunkServerViewBluePrint值发生了变化。但是，当我从vue开发工具查看本地存储时，没有任何变化。我只看到了{chunkServerViewBluePrint: [{columns: "2", rows: "8"}]}。

我非常确定vuex突变正在更新chunkServerViewBluePrint值，因为我可以看到row和columns值从突变中的console.log语句发生了变化。但我不确定为什么vuex-persist没有看到变化。我遗漏了什么？谢谢。

Answer 1

事实证明这是我的错。简单但却被忽视了。由于变量chunkServerViewBluePrint是一个列表，因此在mustation中它应该是：

state.chunkServerViewBluePrint.columns[0] = columns
state.chunkServerViewBluePrint.rows[0] = rows