VueJs - Vuex - 改变状态

Question

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

这是我的 store/index.js.

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

这是我的 Vue 代码（只有片段）

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

我是新手。这是正确的方法吗？或者有什么简单的方法可以做到这一点？

干杯

Answer 1

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

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

然后里面的突变：

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

VueJs - Vuex - 改变状态

VueJs - Vuex - Change a state

web

vue.js

vuex

vuetify.js