Vuex存储变量仅在Store内更新全局无变化问题已解决：误用变量

我在Vue组件中选择数字数组后，点击按钮将其存入Vuex Store，但组件中访问selectedNumbers时始终为空，即使Store的控制台输出显示数据已正确存入。

组件代码 #

<template>
   <MultiSelect
        class="groupselect"
        v-model="localSelectedNumbers"
        :options="options"
        optionLabel="id"
        placeholder="Wähle Geräte"
    />
  <v-btn @click="refresh()">Click</v-btn>
  <p>{{selectedNumbers}}</p>
</template>
<script>
import MultiSelect from "primevue/multiselect";
import {mapMutations, mapState} from "vuex";

export default {
  name: "Gerateauswahl",
  components: {MultiSelect},
  computed: {
    ...mapState([
        'mode',
        'selectedNumbers',
        'options'
    ])
  },
  data() {
    return {
      localSelectedNumbers: [],
      show: []
    }
  },
  watch: {
    selectedNumbers(newValue, oldValue) {
      this.show = newValue
    }
  },
  methods: {
    ...mapMutations([
        'setRows'
    ]),
    refresh() {
      this.setRows(JSON.parse(JSON.stringify(this.localSelectedNumbers)))
      //console.log(this.selectedNumbers)
    }
  }
}
</script>

Store代码 #

import {createStore} from "vuex";

const store = createStore({
    state() {
        return {
            options : [
                {id:1}, {id:2}, {id:3}
            ],
            rows: [],
            mode: false,
            selectedNumbers: []
        }
    },
mutations: {
        setRows(state, payload) {
            console.log(state.rows)
            state.rows = payload
            console.log(state.rows)
        },
}
export default store;

排查情况 #

点击按钮后，Store控制台输出显示rows已正确接收到选择的数组（例如选择1和2时，rows为[{id:1}, {id:2}]），但组件中this.selectedNumbers和this.$store.state.selectedNumbers始终为空。

问题原因与解决方法 #

核心问题是误用了变量：组件通过mapState映射的是selectedNumbers状态，但调用的setRows mutation更新的是Store中的rows状态——两者是完全独立的变量，所以selectedNumbers自然不会有变化。

有两种解决方式：

• 方式一：修改mutation目标状态
  更新Store中的mutation，让它操作selectedNumbers：

  mutations: {
      setSelectedNumbers(state, payload) {
          state.selectedNumbers = payload
      }
  }
  

  同时修改组件中的mutation映射与调用：

  methods: {
      ...mapMutations([
          'setSelectedNumbers'
      ]),
      refresh() {
          this.setSelectedNumbers(JSON.parse(JSON.stringify(this.localSelectedNumbers)))
      }
  }
  

• 方式二：修改组件映射的状态
  保持Store不变，组件中改为映射rows状态：

  computed: {
      ...mapState([
          'mode',
          'rows', // 替换selectedNumbers为rows
          'options'
      ])
  }
  

  同步修改模板与watch监听：

  <p>{{rows}}</p>
  

  watch: {
      rows(newValue, oldValue) {
          this.show = newValue
      }
  }
  

内容的提问来源于stack exchange，提问作者Fritz