如果对象的某个属性，VueJS不会更新组件中的存储值。

Question

我的店铺能正常使用，除了一件事。让我先给你看看我的代码。

const state = {
  category: {
    title: ''
  }
}

const getters = {
  category: state => {
    return state.category
  }
}

const mutations = {
  changeProperty: (state, [val, prop]) => {
    state.category[prop] = val
  }
}

const actions = {
  changeProperty ({ commit }, [val, prop]) {
    commit('changeProperty', [val, prop])
  }
}

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

这是我的组件

<template>
  <v-app-bar
    app
    color="primary"
    dense
  >

    <span>
      {{ JSON.stringify(category) }}
    </span>

    <v-tooltip
      bottom
      v-for="(item, index) in menu"
      :key="index"
    >
      <template v-slot:activator="{ on }">
        <v-btn
          color="info"
          small
          class="ml-5" v-on="on"
          @click="changeProp1(item.title)"
          >
          <v-icon left>mdi-{{ item.icon }}</v-icon>  {{ item.title }}
        </v-btn>
      </template>
      <span>{{ item.legende }}</span>
    </v-tooltip>

    <v-tooltip
      bottom
      v-for="(item, index) in menu"
      :key="'a'+ index"
    >
      <template v-slot:activator="{ on }">
        <v-btn
          color="info"
          small
          class="ml-5" v-on="on"
          @click="changeProp2(item.title)"
          >
          <v-icon left>mdi-{{ item.icon }}</v-icon>  {{ item.title }}
        </v-btn>
      </template>
      <span>{{ item.legende }}</span>
    </v-tooltip>

  </v-app-bar>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Buttons',
  methods: {
    changeProp1(title) {
      console.log('TITRE: ' + title)
      this.$store.dispatch('modulename/changeProperty', [title, 'title'])
    },
    changeProp2(title) {
      console.log('TITRE2: ' + title)
      this.$store.dispatch('modulename/changeProperty', [title, 'title2'])
    }
  },
  data: () => ({
    menu: [
      { title: 'Title 1', icon: 'content-save', legende: 'Legend 1' },
      { title: 'Title 2', icon: 'download', legende: 'Legend 2' },
      { title: 'Title 3', icon: 'upload', legende: "Legend 3" }
    ]
  }),
  computed: {
    ...mapState({
    category: state => state.category
    })
  }
};
</script>

当我点击第一组按钮时 "changeProp1 "被正确地调用了，并且变量中的... span 当我点击第二组按钮时，"changeProp2 "被正确地调用，但变量中的 span 中的变量不会被刷新。span 当我点击第一组按钮时，如果第一个属性不变，也不会被刷新。例如，假设我有对于 category {title: 'Title 1', title2: 'Title2'}的值，如果我改变 title2的值，没有任何变化，如果我改变了 title，我有新的值 title 和 title2 显示。

我的目标是让 category 我每更新一个属性就会刷新一次。

先谢谢你，希望我解释清楚。

解决方法

而不是

state.category[prop] = val

下面一行字就可以了。

state.category = Object.assign({},state.category, {[prop]: val})

感谢我投的答案的作者，解释在这里。https:/vuejs.orgv2guidereactivity.html#For-Objects#。

Answer 1

你正面临着一个反应性的问题，这个问题在vue 3中应该会消失。我在链接vue文档，但它也适用于vuex，因为vuex只是包装了一个vue实例。

https:/vuejs.orgv2guidereactivity.html#For-Objects。

Vue无法检测到属性的增加或删除。

解决办法是先声明所有潜在的道具，或者使用 Vue.set