vuex 以及 token的持久化

vuex

介绍

vuex是vue官方提供的 状态管理模式

用于集中存储公共数据

用于非父子组件间的数据通信

使用

引入 及 注册

// vue2
import Vue from 'vuex'
import vuex from 'vuex'
Vue.use(vuex)

// vue3
import { createStore } from 'vuex'
// 在main.js中 引入 store文件 
import store from './store'
createApp(App).use(store).use(router).mount('#app')

配置项

// 定义 并导出
	// vue2 	
	export default new vuex.store({// 配置项})
    
  // vue3
	export default createStore({// 配置项})
 
// 配置项 (vue2与vue3完全相同)
  state: {}, // 保存公共数据
                                
  mutations: {方法名(state,接收值)=>{ // 处理程序 }}  
    // 修改state数据的方法 参数state为state对象
    
  actions: {方法名(context,接收值)=>{ // 处理程序 }}
    // 用于发送异步请求 参数 context 为 store对象
    // context.rootState  可以访问所有的模块
    
 	getters:{ 方法名(state,getters){ return 最终得到的值 }}  
    // 派生属性 根据已有数据项生成新的值   参数state为state对象  
    参数getters 可以拿到其他的getters项
    
  modules:{ namespaced:true 
           // 使用modules内的配置项时要加模块名
        }  
​​​​​​​// 对vuex进行模块化拆分 内部有所有的配置项

使用配置项

// vue2 写法 用于选项式Api 以及模板  api中要加this
	state: $store.atate.模块名.数据项名字
	mutations:$store.commit('模块名/方法名',传递的值)
	actions: $store.dispatch('模块名/方法名',传入的参数)
	$store.getters.模块名.方法名

// vue3 用于 组合式Api
	// 导入 useStore 函数 调用函数得到store 使用上面的方法 不需要写$

map方法使用配置项(适用于vue2)

// 导入 map配置项
 import  { map配置项首字母大写 }  from 'vuex' 
// 注册
	mapState 和mapGetters  写到组件的computed(计算属性)上
  mapMutations 和mapActions  写到组件的  methods(定义函数中) 
//     写法(以state为例): 
            普通写法 :    ...mapState([名字']) 
            修改名字:     ...mapState({'新名字','原始名字'}) 
            使用模块写法: ... mapState('模块名', ['名字'])
  完成后可以直接使用配置项的数据

token的持久化

token是一个凭证 : 某些接口要权限才可以请求,token就是这个权限的凭证

本质是一个字符串 由后端提供 一般在用户登录时由后端返回

为什么要作持久化

浏览器刷新时会重置数据 ,持久化就是方便刷新后保留有用的数据

在刷新后重新使用

实际的操作就是把这些数据存储到本地存储中

手动保存

// 保存
	// localStorage.setItem() 方法 保存一个键值对到本地  只能存储字符串
	// JSON.stringify() 把数据转为json类型的字符串
	localStorage.setItem('名', JSON.stringify(保存的数据) )   

// 获取
	// localStorage.getItem() 方法 获取本地数据
	// JSON.parse() 把json字符串转为原属性
	JSON.parse(localStorage.getItem('名'))
// 删除
	// localStorage.removeItem() 删除本地数据
	localStorage.removeItem('名')

持久化插件

// 创建模块 并引入
// 安装插件
npm i vuex-persistedstate
// 在store/index.js中引入
import createPersistedstate from 'vuex-persistedstate'
// 在配置项中 注册插件
plugins: [ // 每一项为一个插件
    createPersistedstate({
      key: 'erabbit-client-pc-store', // 保存的键
      paths: ['引入的模块名']  // 保存的模块 （保存的时模块中的state数据）
    })
 ]
// 默认存储到localStorage中