vuex保存登录的数据

一、适合初学者使用，保存数据以及获取数据

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;
		}
	}
}