如何在 Vue.js 应用程序中使用 vuex 存储从子组件（设置页面）设置值？

Question

我正在尝试创建一个“设置”组件，它将选定的值保存到存储中，以便所有其他组件都可以使用这些值来更改它们的外观。

SettingsView.vue:

设置之一（你也可以看看on codepen）：

[...]

<p>{{ themeColor }}</p>
<v-radio-group v-model="themeColor">
  <v-radio label="light" value="light"></v-radio>
  <v-radio label="dark" value="dark"></v-radio>
</v-radio-group>

[...]

<script>
export default {
  data () {
    return {
      // default value
      themeColor: 'light',
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.themeColor
    }
  },
  methods: {
    changeThemeColor() {
      this.$store.commit('changeThemeColor')
    },
  }
}
</script>

我不知道如何将该设置的选定值正确地发送到商店，所以我只是用一种方法创建了一个突变（加上需要有一些默认值，例如 themeColor: 'light' 如图所示上面，让它更混乱）

store/modules/Settings.js

const state = {
    themeColor: ''
  }
  
  const mutations = {
    changeThemeColor: state => {
      state.themeColor = ''
    }
  }
  
  export default {
    state,
    mutations
  }

如何正确执行此操作，以便我可以在所有组件中使用该值？

我必须使用 getters 或 actions 之类的东西吗？我真的不知道。

Answer 1

从 https://vuex.vuejs.org/en/forms.html 开始，我将使用带有 getter 和 setter 的计算属性，即

export default {
  computed: {
    themeColor: {
      get () {
        return this.$store.state.themeColor
      },
      set (value) {
        this.$store.commit('changeThemeColor', value)
      }          
    }
  }
}

请注意，您不需要 data 或 methods。

您的店铺应该也更像

const state = {
  themeColor: 'light' // default value
}

const mutations = {
  changeThemeColor (state, themeColor) {
    state.themeColor = themeColor
  }
}

演示~https://codepen.io/anon/pen/YYbPww?editors=1011

如果您只想在组件中显示/读取 themeColor 状态，我建议使用 mapState helper。

import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState(['themeColor'])
}

如何在 Vue.js 应用程序中使用 vuex 存储从子组件（设置页面）设置值？

How to set values from a child component (settings page) using vuex store in a Vue.js app?

vue.js

vuejs2

vuex

SettingsView.vue:

store/modules/Settings.js