罗田建设局网站,网站开发建设用的软件,论坛网站模板下载,app开发公司有哪些部门一、简介
pinia是 vue3 新的状态管理工具#xff0c;简单来说相当于之前 vuex#xff0c;它去掉了 Mutations 但是也是支持 vue2 的#xff0c;需要的朋友可以参考下 二、使用方法
1.安装 npm install pinia -S 2..引入 import { createPinia,PiniaPluginContext } from p…一、简介
pinia是 vue3 新的状态管理工具简单来说相当于之前 vuex它去掉了 Mutations 但是也是支持 vue2 的需要的朋友可以参考下 二、使用方法
1.安装 npm install pinia -S 2..引入 import { createPinia,PiniaPluginContext } from pinia import { createApp,toRaw } from vue import App from ./App.vue const store createPinia() const app createApp(App) app.use(store) app.mount(#app) 3.创建store文件夹
在src目录下面创建store文件
注意 pinia 不需要创建 modules 文件来区分模块化这是它和 vuex 的区别。 store/index.ts
import {defineStore } from pinia
import {Names} from ./store-name
type User {name:string,age:number
}const result:User {name:xiaochen,age:888,
}const asyncResult:User {name:异步名字,age:999,
}const Login ():PromiseUser {return new Promise((resolve) {setTimeout((){resolve(asyncResult)},2000)})
}
//第一个参数 命名空间唯一值
export const useTestStore defineStore(Names.TEST,{state:(){return{current:122,name:xiaochen2,user:User{},asyncUser:User{},}},//相当于computed 修饰一些值 有缓存的getters:{newName ():string{return $-${this.name}-${this.getUserAge}},getUserAge():number{return this.user.age || 1}},//methods 可以做同步 异步也支持 提交stateactions:{// setCurrent(num:number){// this.current num// },//同步setUser(){this.user result},//异步async getUser(){const resultList await Login()this.asyncUser resultListthis.setName(超级帅的飞机)//相互调用方法this.setAge(6666)//相互调用方法},setName (name:string){this.name name},setAge (age:number){this.user.age age}}})
命名空间的唯一值
export const enum Names {TEST TEST,BASE BASE
} 4.使用Pinia import { useTestStore} from ../store; const sinaTest useTestStore(); 5.修改数据(五种方法)
方法1:直接改变 div classcontainer Pinia:{{ sinaTest.current }} -- {{ sinaTest.name }} button clickchange改变/button /div const change () { sinaTest.current; }; 方法2:利用patch直接改变 const change () { sinaTest.$patch({ current: 888, name: 黑丝, }); }; 方法3利用$patch传递参数 const change () { //可以写工厂函数 sinaTest.$patch((state) { state.current 999; state.name 迪丽热巴; }); }; 方法4: 利用$state修改(有弊端不推荐) const change () { //可以写工厂函数 sinaTest.$state { current: 2000, name: 134, }; }; 方法5: 通过actions去改变 const change () { sinaTest.setCurrent(852); }; 这里只是简单了一些修改的方法 具体使用还是得结合业务场景去使用具体了解可以看看Pinia官方文档
三、持久化存储
pinia 和 vuex 一样数据是短时的只要一刷新页面数据就会恢复成初始状态为了避免这个问题可以对其采用持久化保存方法。
持久化保存的原理是在 pinia 中数据更新时同步保存到 localStorage 或 sessionStorage 中刷新后从本地存储中读取数据
下面介绍两种实现的方法
一手写
1.自己手写一个实现持久化(在main.ts写)
首先我们先了解一下pinpa能获取到的参数 通过上面的打印我们了解到对应的数据存在哪里我们即可以手写
//先手写我们存储数据的localStorage
const getStorage (key:string) {return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string):{}}//存储数据const setStorage (key:string,value:any) {localStorage.setItem(key,JSON.stringify(value)) //value可能是对象或者数组 所以JSON.stringify需要这个转换成字符串 [1,2,3] [1,2,3]} 2.手写我们插件函数(柯里化优化):柯里化就是将一个多参数的函数 转换成单参数的函数
解析:options?.key ??__piniaKey__ 当key不传的时候默认是__piniaKey__ 传的时候就是传的数据。下面使用的时候有介绍
空值合并运算符 ?? 是一个逻辑操作符如果左侧的表达式为 null或者 undefined 时返回其右侧表达式否则返回左侧表达式。
//函数柯里化 柯里化就是将一个多参数的函数 转换成单参数的函数
const piniaPlugin (options:Options) {return (context:PiniaPluginContext){ //拿取到pinpa的参数console.log(context,context);const {store} context //解构我们需要的storeconst data getStorage(${options?.key ??__piniaKey__}-${store.$id}) //获取到keyconsole.log(data,data);//可以通过$subscribe监测到store数据变化store.$subscribe((){// 每当它发生变化时将整个状态持久化到本地存储//${options?.key ??__piniaKey__}-${store.$id} 唯一值keysetStorage(${options?.key ??__piniaKey__}-${store.$id},toRaw(store.$state)) //store.$state proxy对象 toRaw把它转为原始对象})return{...data}}
}
3.使用我们的插件
store.use(piniaPlugin({key:pinia //传值key过去 存储用这个名字
}))
4.效果如下 二、使用插件
1.安装插件 npm install pinia-plugin-persist 2.引入插件 import piniaPersist from pinia-plugin-persist pinia.use(piniaPersist) 3.使用插件
①设置key指定保存内容
export const useBaseStore defineStore(Names.BASE, {state: () {return {baseUrl: http://localhost:9090,BaseCurrent: 0,};},persist: {enabled: true, // true 表示开启持久化保存strategies: [{key: base,storage: localStorage,paths: [BaseCurrent,baseUrl]},],},//相当于computed 修饰一些值 有缓存的getters: {},//methods 可以做同步 异步也支持 提交stateactions: {},
}); //第一个参数 命名空间唯一值②你甚至可以对不同数据设置不同的本地存储方式。
export const useBaseStore defineStore(Names.BASE, {state: () {return {baseUrl: http://localhost:9090,BaseCurrent: 0,testType:test,};},persist: {enabled: true, // true 表示开启持久化保存strategies: [{key: base,storage: localStorage,paths: [BaseCurrent,baseUrl]},{key: base2,storage: sessionStorage,paths: [testType]},],},//相当于computed 修饰一些值 有缓存的getters: {},//methods 可以做同步 异步也支持 提交stateactions: {},
}); //第一个参数 命名空间唯一值③保存到 cookie
保存到 cookie 中当然也是可以的不过需要手动添加 cookie 的保存方式同样此处也是推荐使用插件 js-cookie 来完成。一般用于存储token npm install js-cookie import Cookies from js-cookie
//存储在cookie
const cookiesStorage: Storage {setItem(key, state:any) {console.log(state,state);return Cookies.set(key, state, { expires: 3 }); // 设置有效期 3 天不设置默认同 sessionStorage 有效期一致},getItem(key) {return JSON.stringify({accessToken: Cookies.get(key),});},length: 0,clear: function (): void {throw new Error(Function not implemented.);},key: function (index: number): string | null {throw new Error(Function not implemented.);},removeItem: function (key: string): void {throw new Error(Function not implemented.);}
}export const useBaseStore defineStore(Names.BASE, {state: () {return {baseUrl: http://localhost:9090,BaseCurrent: 0,testType:test,token:12314,};},persist: {enabled: true, // true 表示开启持久化保存strategies: [{key: base,storage: localStorage,paths: [BaseCurrent,baseUrl]},{key: base2,storage: sessionStorage,paths: [testType]},{key: tokenSave,storage: cookiesStorage,paths: [token]},],},//相当于computed 修饰一些值 有缓存的getters: {},//methods 可以做同步 异步也支持 提交stateactions: {},
}); //第一个参数 命名空间唯一值
