Я пытаюсь сохранить данные ящика в VueX, чтобы использовать их на внешнем компоненте.

Ошибка моей консоли: [vuex] unknown action type: app/switchDrawer

Мой шаблон VueJS:

страницы/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 () выдает мне много строк в цикле в консоли.

Я бы тоже хотел использовать класс mapGetters из VueX вместо вычисляемого get / set:

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

У меня ошибка в консоли:

[Предупреждение Vue]: вычисленное свойство «drawer» было присвоено, но у него нет установщика.

Мой магазин 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)
  }
}
  

В СЛУЧАЕ, ЕСЛИ ВЫ НЕ ХОТИТЕ СОЗДАВАТЬ НОВУЮ МУТАЦИЮ И ОБРАБАТЫВАТЬ ЛОКАЛЬНО. (что я предпочел лично, поскольку мой магазин уже довольно большой)

Столкнулся с аналогичной проблемой при использовании библиотеки vue-ui (vuesax)

Решена путем инициализации новой data переменной в computed переменную (ту, что из хранилища) в созданном хуке (почему в created хуке)

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

Теперь используйте localDrawer в приложении you.
ПРИМЕЧАНИЕ: я также наблюдаю за переменной drawer. Так что в любом случае, если его значение изменяется, оно отражается.

Найдена ваша проблема — у вычисляемого установщика не должно быть оператора 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)
  }
}