Блог

Мой магазин vuex полностью настроен, и все работает просто отлично, однако я могу фиксировать свои мутации только в компонентах, которые напрямую импортируются в src App.vue.

Например, resetState in Header.vue срабатывает должным образом, когда я нажимаю кнопку, потому что он импортируется непосредственно в src / App.vue

 <template>
      <v-btn
        icon
        to="/"
        id="no-background-hover"
        @click="resetState"
      >
          ///
      </v-btn>
</template>

<script lang="ts">
import Vue from 'vue'
import { MutationTypes } from '@/store/mutation-types'

export default Vue.extend({
  name: 'Header',

  methods: {
    resetState () {
      this.$store.commit(MutationTypes.RESET_STATE, 0)
    }
  },

})
</script>

  

Но когда у меня есть этот точный компонент в любом из моих views/ BlahBlahBlah.vue, который маршрутизируется, ничего не происходит, когда я нажимаю кнопку

Вот main.ts

 import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'

import App from './App.vue'
import router from './router'
import './assets/sass/index.sass'
import store from './store'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false
Vue.use(VueTypedJs)
new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')
  

Ваша проблема возникает из-за того, что «to=»/»» выполняется перед обращением к хранилищу, и поскольку он обновляет страницу, команда не отправляется.

Вот как вы должны это сделать:

 <template>
      <v-btn
        icon
        id="no-background-hover"
        @click="resetState"
      >
          ///
      </v-btn>
</template>

<script lang="ts">
import Vue from 'vue'
import { MutationTypes } from '@/store/mutation-types'

export default Vue.extend({
  name: 'Header',

  methods: {
    resetState () {
      this.$store.commit(MutationTypes.RESET_STATE, 0)
      window.location.href = '/'
    }
  },

})
</script>  

Я нашел исправление, все, что мне нужно было сделать, это обернуть router-view в keep-alive тег

 <keep-alive>
        <router-view/>
</keep-alive>