如何从导入 "store" 的 vue-router 路由内部提交 vuex 存储突变?
How do I commit a vuex store mutation from inside a vue-router route that imports "store"?
我的目标是提交 (invoke/call) 我在 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 getters的例子。而且,如果我 console.log()
Store
导入,我可以看到我的整个商店结构
modules:
app:
actions: {someAction: ƒ, …}
getters: {isStartingQuery: ƒ}
mutations: {ariaAnnounce: ƒ, …}
state: {…}
__proto__: Object
如何从 vue-router 文件中导入我的商店,然后 commit
一个突变?
我在谷歌上搜索了很长时间,但没有找到针对此特定案例或问题的 Whosebug 答案或 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
}
}
我的目标是提交 (invoke/call) 我在 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 getters的例子。而且,如果我 console.log()
Store
导入,我可以看到我的整个商店结构
modules:
app:
actions: {someAction: ƒ, …}
getters: {isStartingQuery: ƒ}
mutations: {ariaAnnounce: ƒ, …}
state: {…}
__proto__: Object
如何从 vue-router 文件中导入我的商店,然后 commit
一个突变?
我在谷歌上搜索了很长时间,但没有找到针对此特定案例或问题的 Whosebug 答案或 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
}
}