Nuxt中使用Vuex(新版,简单入门)
1.前言因为我学的是后端开发,前端不是很厉害,如果有什么不对的地方请评论指出,谢谢!看这篇文章你需要对Vuex有一定的了解 官方链接做课设的时候使用到了Nuxt框架,需要做登录,也就结识了Vuex,其实以前就学过Vuex,但是一直不知道这个东西有什么优势,特点。这次我在实际使用中就用到了一个非常好用的特点,官方的解释如下:Vuex 的状态存储是响应式的。当 Vue 组件从 store ...
1.前言
因为我学的是后端开发,前端不是很厉害,如果有什么不对的地方请评论指出,谢谢!
看这篇文章你需要对Vuex有一定的了解 官方链接
做课设的时候使用到了Nuxt框架,需要做登录,也就结识了Vuex,其实以前就学过Vuex,但是一直不知道这个东西有什么优势,特点。
这次我在实际使用中就用到了一个非常好用的特点,官方的解释如下:
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
这个特点意味着什么?意味着 用户已进入页面,页面中有些组件需要登录才能使用,用户登录后,页面不用刷新这些组件就会被激活。
2. 编写文件
Nuxt在Vue的基础上为我们又做了一层封装,在使用Vuex的时候要方便一些
- 在根目录下的store文件夹下创建js文件即可(Nuxt使用模块化,js文件的文件名即为模块名),不需要使用index.js文件(新版的使用index.js会出现错误,具体报错信息没有截下来)
- 编写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. 页面中获取变量和调用函数修改变量
- 在需要使用到的页面中引入Vuex
import {mapState,mapMutations}from 'vuex'
- mapState 和 mapGetters 都要写在computed中
computed:{
...mapState('user',{ //前面三个 . 不是多余的!! 第一个参数是模块名称(就是js文件名),后面是{变量名:state => 回调函数 } 这个在后面还会讲一下
isLogin:state=>state.isLogin
}),
},
- mapMutations和mapActions 需要写在methods中
methods: {
// 获取vuex中修改isLogin的方法 , 三个 . 也不能掉 , 数组的地方都是可以写多个
// ...mapMutations('模块名',['导出的方法名称']),
...mapMutations('user',['SET_isLogin']),
}
- 调用从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,如果有就返回已登录
更多推荐
所有评论(0)