Nuxt中使用Vuex（新版，简单入门）

1.前言

因为我学的是后端开发，前端不是很厉害，如果有什么不对的地方请评论指出，谢谢！
看这篇文章你需要对Vuex有一定的了解 官方链接

做课设的时候使用到了Nuxt框架，需要做登录，也就结识了Vuex，其实以前就学过Vuex，但是一直不知道这个东西有什么优势，特点。
这次我在实际使用中就用到了一个非常好用的特点，官方的解释如下：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

这个特点意味着什么？意味着 用户已进入页面，页面中有些组件需要登录才能使用，用户登录后，页面不用刷新这些组件就会被激活。

2. 编写文件

Nuxt在Vue的基础上为我们又做了一层封装，在使用Vuex的时候要方便一些

1. 在根目录下的store文件夹下创建js文件即可（Nuxt使用模块化，js文件的文件名即为模块名），不需要使用index.js文件（新版的使用index.js会出现错误，具体报错信息没有截下来）
   
2. 编写user.js内容

export const state = () => ({	//state里面存放的是变量，如果你要注册全局变量，写这里
    isLogin:false,
});
/*const getters = {     //getters相当于是state的计算属性，如果你需要将变量的值进行计算，然后输出，写这里
include: (state) => (val) => {
return state.list.indexOf(val) > -1;
}
}
;*/
const mutations = {       //修改store中的变量的方法，如果你要改变变量的值，就写这（vuex中state中的值不能直接修改）
    SET_isLogin(state, value) {
        state.isLogin = value;
    }
};
/*const actions = {//actions提交的是mutations，相当于就是改变变量的方法的重写，但是，actions是可以进行异步操作的
async SET_isLogin({state, commit}, val) {
commit('SET_isLogin', val);
}
};*/

export default {
    namespaced:true,//命名空间
    state,//这里你用到了哪几个属性就写哪几个，不需要的可以注释掉
    // getters,
    // actions,
    mutations
};

3. 页面中获取变量和调用函数修改变量

1. 在需要使用到的页面中引入Vuex

import {mapState,mapMutations}from 'vuex'

2. mapState 和 mapGetters 都要写在computed中

computed:{
      ...mapState('user',{	//前面三个 . 不是多余的！！ 第一个参数是模块名称（就是js文件名），后面是{变量名：state => 回调函数 }  这个在后面还会讲一下
        isLogin:state=>state.isLogin
      }),
    },

3. mapMutations和mapActions 需要写在methods中

methods: {
      // 获取vuex中修改isLogin的方法 , 三个 . 也不能掉 ， 数组的地方都是可以写多个
      // ...mapMutations('模块名',['导出的方法名称']),
      ...mapMutations('user',['SET_isLogin']),
}

4. 调用从vuex中获取的方法（我看很多博客都没写）

//Promise.all([this.方法名称(传入参数)])
Promise.all([this.SET_isLogin(true)])

写在方法中需要调用的地方即可

更多请了解前端大佬博客：理解Vuex的辅助函数mapState, mapActions, mapMutations用法

4. 页面刷新Vuex中数据清空

当页面刷新，Vuex中的数据会清空，这意味着用户在刷新页面和访问其他页面的登录状态会掉，这是非常不友好的。这里我使用的是Cookie来存储，使用的是 js-cookie ，网上也有别的方法，但是原理差不多。 js-cookie具体怎么使用我就不写了，我只写写用户刷新后怎么保持登录状态。

computed:{
  ...mapState('user',{
    isLogin:state=>{
      if(state.isLogin==""){
        if(auth.getUser().token!= undefined){
          return true
        }
      }
      return state.isLogin
    },
  }),
},

import auth from ‘@/utils/auth’
auth 是我写的一个设置获取移除cookie的js
auth.getUser().token 获取cookie中用户的token
当页面刷新，从vuex中获取的isLogin为“”，就判断cookie中是否有用户的token，如果有就返回已登录