vuex-persist 不更新 vuex 状态答案

【问题标题】：vuex-persist not updating vuex statevuex-persist 不更新 vuex 状态
【发布时间】：2021-06-19 17:43:43
【问题描述】：

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

<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)
    }
  }
})

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

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

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

原来是我的错。简单却被忽视。因为变量chunkServerViewBluePrint 是一个列表，所以在mustations 中它应该是：

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

【讨论】：