为什么我的商店在我使用深度监视时没有更新？

Question

当我更改文本字段的值时，我为此组件设置的深度观察器不会更新商店。我找不到正确更改商店对象的 (profile) key/value 对 (groupName: string)

的方法

Profile.vue 元素:

<v-text-field v-model="profileData.groupName" label="Group Name"></v-text-field>

Profile.vue JS:

import { mapGetters, mapMutations } from "vuex";

export default {
  name: "Profile",
  created() {
    this.profileData = JSON.parse(JSON.stringify(this.getProfile()));
    console.log(this.profileData);
  },
  data() {
    return {};
  },
  methods: {
    ...mapGetters(["getProfile"]),
    ...mapMutations(["setProfile"])
  },
  watch: {
    profileData: {
      handler(value) {
        this.setProfile(value);
      },
      deep: true
    }
  }
};

build.js（store.js的模块）：


const state = {
    profile: {
        "groupName": "Happy group",
        "groupNumber": "9999999999",
        "groupContact": "Bob Ross"
    }
};

const getters = {
    getProfile: (state) => state.profile,
};

const actions = { };

const mutations = { 
    setProfile: (state, profile) => (state.profile = profile)
};

export default {
    state,
    getters,
    actions,
    mutations,
}

我不确定为什么状态没有更新。有人知道吗？

感谢阅读

Answer 1

你不应该像你在这里做的那样绑定状态的变量：v-model="profile.groupName"（在实践中你正在改变 vuex 突变之外的道具，你可能会得到一些关于那个的控制台警告）。

所以你可以将 getProfile 值复制到局部变量（vue 的 data()）并调度一个 action 来更新状态中的 profile当你想要的时候（根据处理程序或其他）。

Answer 2

这是因为 Vue 允许你在非严格模式下直接修改 vuex 状态。如果启用严格模式，突变处理程序之外的任何突变都会引发错误。

export default {
  state,
  getters,
  actions,
  mutations,
  strict: true
}

Vuex 指南提到它 here。您也可以仅为开发启用它

strict: process.env.NODE_ENV !== 'production'

为什么我的商店在我使用深度监视时没有更新？

Why is my store not updating when I use a deep watch?

javascript

store

vue.js

vuex