Question

我的目标是提交（调用/调用）我在Vuex存储中定义的一个突变。

store / store.js

export default {
  modules: {
    app: {
      state: {
        shouldDoThing: false,
      }
      mutations: {
        setShouldDoThing: (state, doThing) => { state.shouldDoThing = doThing },
      }
    }
  }
}

自从我将Vuex附加到我的应用程序后，我可以在整个应用程序的各个组件中使用this.$store.commit，而不会出现问题。

main.js

import Store from 'store/store.js';
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
const app = new Vue({
  el: '#app-root',
  store,
  // ...etc
});

例如：

exampleComponent.vue

export default {
  created() {
    // This works!
    this.$store.commit('setShouldDoThing', true);
  },
}

现在，我想使用beforeEnter方法从vue-router路由文件中提交某些内容：

exampleRoute.js

import Store from 'store/store.js'

const someRoute = {
  path: '/blah',
  beforeEnter(to, from, next) {
    Store.commit('setShouldDoThing', true);
    next();
  }
}

但是，当我尝试上面的方法时，我得到了错误

TypeError: _state_store__WEBPACK_IMPORTED_MODULE_10__.default.commit is not a function

在线上有很多通过导入成功使用vuex getter的示例。而且，如果我console.log() Store导入，我可以看到我的整个商店结构

modules:
  app:
    actions: {someAction: ƒ, …}
    getters: {isStartingQuery: ƒ}
    mutations: {ariaAnnounce: ƒ, …}
    state: {…}
    __proto__: Object

如何导入我的商店，然后从vue-router文件中commit进行突变？

Answer 1

我已经使用Google搜索很长时间了，没有找到针对此特定案例或问题的stackoverflow答案或vue论坛答案，所以下面是我测试过并可以在我的案例中使用的解决方案。

>

无论出于何种原因，我都无法触发commit。但是，我可以直接直接调用该突变，然后将此更改反映到其他所有组件中（例如，未导入“不同”存储）。

someRoute.js

import Store from 'store/store.js'

const someRoute = {
  path: '/blah',
  beforeEnter(to, from, next) {
    Store.modules.app.mutations.setShouldDoThing(Store.modules.app.state, true);
    next();
  }
}

随后，在某些组件中：

someComponent.vue

export default {
    beforeMount() {
      console.log(this.$store.state.app.shouldDoThing);
      // true
    }
}

如何从导入“存储”的vue-router路由内部进行vuex存储突变？

1 个答案: