Chrome 控制台中的 VueX 操作/突变错误

Question

我尝试将抽屉数据存储在 VueX 中以在外部组件上使用它。

我的控制台错误：[vuex] unknown action type: app/switchDrawer

我的 VueJS 模板：

pages/test.vue

<template>
  <v-navigation-drawer v-model="drawer" app>
    <v-list dense>
      ...
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  computed: {
    drawer: {
      get () {
        return this.$store.state.app.drawer
      },
      set (value) {
        console.log(value);
        return this.$store.dispatch('app/toggleDrawer', value)
      }
    }
  }
}
</script>

console.log() 函数在控制台循环中给了我很多行。

我也想使用 VueX 的 mapGetters 类来代替计算 get/set：

computed: mapGetters({
  drawer: 'app/drawer'
})

我在控制台中有一个错误：

[Vue 警告]：计算属性“抽屉”已分配给但它没有 二传手。

我的 VueX 商店：

store/app.js

export const state = () => ({
  drawer: true
})

export const getters = {
  drawer: state => state.drawer
}

export const mutations = {
  TOGGLE_DRAWER: (state) => {
    state.drawer = !state.drawer
  }
}

export const actions = {
  toggleDrawer ({ commit }, value) {
    commit('TOGGLE_DRAWER', value)
  }
}

Answer 1

如果您不想进行新的突变并在本地进行处理。 （我个人更喜欢，因为我的商店已经很大了）

在使用 vue-ui 库（vuesax）时遇到类似问题

通过在 created 钩子中将新的 data 变量初始化为 computed 变量（来自商店的变量）来解决它 (Why in created hook)

   created() {
      this.localDrawer = this.drawer
   },
   data() {
      return {
         localDrawer: ''
      }
   },
   computed: {
      ...mapGetters({
         drawer: 'drawer'
      })
   },
   watch: {
      drawer(newValue, oldValue) {
         this.localDrawer = newValue
      }
   }

现在在你的应用中使用localDrawer。 注意：我也在看抽屉变量。因此，无论如何，如果它的值发生变化，它就会得到反映。

Answer 2

找到您的问题 - 计算的 setter 必须没有 return 语句。

 drawer: {
      get () {
        return this.$store.state.app.drawer
      },
      set (value) {
        this.$store.dispatch('app/toggleDrawer', value)
      }
    }

请注意，您的操作向不带任何值的突变提交了一个值。所以最好添加一个处理上述值的新突变：

export const mutations = {
  SET_DRAWER: (state, value) => {
    state.drawer = value
  }
}

export const actions = {
  toggleDrawer ({ commit }, value) {
    commit('SET_DRAWER', value)
  }
}