VueJs - Vuex - 改变状态答案

【问题标题】：VueJs - Vuex - Change a stateVueJs - Vuex - 改变状态
【发布时间】：2021-01-19 09:01:49
【问题描述】：

我想通过 Vuetify 的开关将状态“模式”更改为“”。

这是我的商店/index.js。

export default new Vuex.Store({
  state: {
    mode: 'dark',
  },
  mutations: {
    change (state) {
      state.mode += '';
    }
  },
  actions: {
  },
  modules: {
  }
})

这是我的 Vue 代码（仅限 sn-ps）

<v-switch
          v-model="switch1"
          :label="`Dark / Light Mode: ${switch1.toString()}`"
        ></v-switch>

<script>
export default {
  data () {
    return {
      switch1: true,
    }
  },
  watch : {
    switch1(newValue) {
      this.$store.commit('change');
      console.log(newValue);
    }
  }
    
}
</script>

我是新手。这是正确的方法吗？或者是一种简单的方法？

干杯

【问题讨论】：

标签： vue.js web vuetify.js vuex

【解决方案1】：

state.mode += ''; 不会更改状态中的任何内容，它只是添加一个空字符串，正确的方法是使用有效负载使用赋值 = 对其进行变异：

this.$store.commit('change', newValue?'light':'dark');

然后在突变内部：

  mutations: {
    change (state, mode) {
      state.mode =mode;
    }
  },

【讨论】：