一、适合初学者使用,保存数据以及获取数据
store.js:
初始化Store的实例对象
// 1、导入 Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 导入用户信息模块
import moduleUser from '@/store/user.js'
// 2、将 Vuex 安装为 Vue 的插件
Vue.use(Vuex)
// 3、创建 Store 的实例对象
const store = new Vuex.Store({
// TODO : 挂载 store 模块
modules:{
// 挂载用户信息模块
m_user:moduleUser
}
// 4、向外共享 Store 的实例对象
export default store
main.js:
import store from '@/store/store.js'
const app = new Vue({
store
})
第一种用法:传数据给到vuex里面的方法
把后端返回的token和用户信息user(openid, nickName等信息)“存储到vuex保存起来”
var json = {
tk: ress.data.token,
user: ress.data.user
}
this.$store.commit("m_user/refreshToken", json);
第二种用法;获取vuex里面的数据
import {mapState,mapMutations} from 'vuex'
// 获取vuex里面保存的token和用户信息
computed: {
...mapState({
userinfo: (state) => state.m_user.userinfo,
token: (state) => state.m_user.token
})
},
第三种用法;获取vuex里面的方法
import {mapState,mapMutations} from 'vuex'
<view class="flex" @click="removeStorage">
<cover-image src="/static/imges/my/icon_kaiguan.png" class="my_login"></cover-image>
<text class="font">退出登陆</text>
</view>
methods: {
...mapMutations({
removeStorage: "m_user/removeStorage"
})
}
user.js:
export default {
// 为当前模块开启命名空间
namespaced: true,
// 模块的 state 数据
state: () => ({
token: '',
userinfo: {},
}),
// 模块的 mutations 方法 两个方法两种情况
mutations: {
//直接从缓存中拿到保存的token和userinfo
setToken(state) {
// get 直接从缓存拿token
uni.getStorage({
key: 'token',
success: function(res) {
state.token = res.data;
// console.log("token = " + res.data);
},
fail(e) {
state.token = "";
console.log("token is null ");
}
})
// 获取用户信息
uni.getStorage({ //没登录就获取不了,登录之后,有缓存了,下次再打开小程序就直接拿到缓存stroage
key: 'userinfo',
success: function(res) {
state.userinfo = res.data;
// console.log("userinfo = " + res.data);
},
fail(e) {
state.userinfo = "";
console.log("userinfo is null ");
}
})
},
//替换 第一次登陆获取到数据,保存到缓存里面
refreshToken(state, json) {
// set 有token参数 登录成功调用,传的token 缓存中没有数据,就登录,然后把token保存到 缓存
uni.setStorage({
key: 'token',
data: json.tk,
success: function() {
state.token = json.tk; //token
},
fail() {
console.log("refresh token fail ");
}
})
//var userJson = JSON.parse(user)
console.log(json.user);
// 保存用户信息
uni.setStorage({
key: 'userinfo',
data: json.user,
success: function() {
state.userinfo = json.user;
console.log("refresh userinfo success");
},
fail() {
console.log("refresh userinfo fail ");
}
})
},
//注销登录方法 移除storang
removeStorage(state) {
uni.showModal({
title: '确定退出?',
content: '退出登陆后将无法查看此板块,重新登录即可查看',
success: function(res) {
if (res.confirm) {
// 清掉userinfo
uni.removeStorage({
key: 'userinfo',
// data: json.user,
success: function() {
state.userinfo = {};
state.token = ""
}
})
// 清掉token
uni.removeStorage({
key: 'token',
success: function() {
state.token =''; //token
},
})
uni.showToast({
title: "退出登陆成功",
duration: 1000,
icon: "success"
})
// setTimeout(function () {
// uni.hideLoading();
// }, 2000);
//
} else if (res.cancel) {
// uni.showToast({
// title: "您取消了退出登陆",
// duration: 3000,
// icon: "exception"
// })
}
}
});
},
},
// 模块的 getters 属性
getters: {
getToken(state) {
return state.token;
}
}
}