vuex store 无法在路由组件中触发答案

【问题标题】：vuex store is unable to trigger in routed componentsvuex store 无法在路由组件中触发
【发布时间】：2021-02-12 08:12:28
【问题描述】：

我的 vuex 商店已全部设置好，一切正常，但是，我只能在直接导入 src App.vue 的组件中提交我的突变。

例如，Header.vue 中的resetState 在我单击按钮时触发，因为它是直接导入到 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>

但是当我在路由的任何视图/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')

【问题讨论】：

你看过 Vue 开发工具吗？控制台中是否有任何错误/警告？
@Anatoly 我做到了。没有错误，什么都没有
你能分享你的main.js吗？
@Prime 我刚刚做了

标签： javascript typescript vue.js

【解决方案1】：

出现您的问题是因为在引用商店之前执行了“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>

【讨论】：

【解决方案2】：

我找到了解决方法，我需要做的就是将 router-view 包装在 keep-alive 标记中

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

【讨论】：