nuxt环境下使用vuex

首先nuxt这里就不做过多介绍了，在nuxt环境中如何配置使用vuex是本篇文章的主要内容。
nuxt版本：2.15

一般在我们nuxt项目中的目录结构都会有一个store文件夹，注意这个文件夹不需要我们手动配置，nuxt已经帮我们配置好了，我们只需要用就可以了

一、store文件夹结构

store文件夹中主要分为两类文件，分别是index.js和xxx.js(xxx为任意名字)文件；

在nuxt项目中我们不需要去nuxt.config.js配置，nuxt很贴心的帮我们省去了返回Vuex实例的代码；

二、文件写法

使用状态树模块化的方式，store/index.js 不需要返回 Vuex.Store 实例，而应该直接将 state、mutations 和 actions 暴露出来。

注意：这里我的文件名为userStore

三、使用方法

存入

            // 存入store
            // 注意：nuxt的store帮我们自动划分了模块：store目录下index.js是一级状态树，其他js文件是二级状态树
            // 这种存储方式不正规，会报错
            // this.$store.state.userStore.userInfo = response.data.data.userInfo;
            // this.$store.state.userStore.userInfoOver = true;
            this.$store.commit('userStore/setUserInfo', response.data.data.userInfo);
            this.$store.commit('userStore/setUserInfoOver', true);

取出

this.$store.commit("userStore/setUserBaseInfo", this.userBaseInfoVo);

四、小结

vuex状态树的模块写法，不同的文件之间不能直接引用

vuex状态树使用模块加载引用，得到的是一组命名空间，而不是最终生成的Vuex模块文件

要通过b文件修改其他文件的state需要在store外部去修改