我试图将我的 Nuxt Vuex 存储文件拆分为单独的文件。并且没有全部Vuex getters
, mutations
and actions
到一个巨大的文件中。这演示项目位于 Github 上 https://github.com/dutchwebworks/nuxt-learning/tree/feature/vuex-separation顺便一提。
我读过这个官方 Nuxt Vuex Store 文档 https://nuxtjs.org/guide/vuex-store#modules-mode;但似乎无法让它发挥作用。对于放置东西的位置有点模糊。
我在这些文件中有以下内容:
以下是我的:store/index.js
import Vue from "vue";
import Vuex from "vuex";
import Auth from "./modules/auth";
Vue.use(Vuex);
export const store = () => {
return new Vuex.Store({
state: {
},
modules: {
Auth
}
})
}
这是我的:store/auth.js
const state = () => {
username: null
};
const getters = {
username: state => {
return state.username;
},
isAuthenticated: state => {
return state.username != null;
}
};
const mutations = {
login: (vuexContext, username) => {
vuexContext.username = username;
this.$router.push("/dashboard");
},
logout: vuexContext => {
vuexContext.username = null;
this.$router.push("/");
}
};
const actions = {
};
export default {
state,
getters,
mutations,
actions,
};
最后在我的:pages/index.vue
这就是我所说的地方login突变:
<script>
export default {
layout: "non-logged-in",
data() {
return {
username: null
}
},
methods: {
onSubmit() {
this.$store.commit("login", this.username);
}
}
}
</script>
我收到的错误:
[vuex] unknown mutation type: login
我在这里做错了什么?我以为我正在正确导入所有内容store/index.js