快速上手vue前端存储库、全局状态管理工具pinia
-
pinia是什么,为什么我们要使用pinia?
- pinia是vue全局状态管理工具,类似vueX,用于全局的数据状态存储、修改变更等等
- 相较于vueX,pinia的使用较为简单,轻量级,上手容易,干掉了vueX的层层套娃
-
快速安装配置pinia
- 安装依赖 npm install pinia
- 创建一个store
// 创建一个store文件,对全局属性、方法变量进行管理 import { defineStore } from "pinia"; //defineStore返回一个函数进行调用,参数一为命名,即存储在本地的名称,参数二是对应的配置 //state 用于变量的存储,getters是计算属性,action是方法集合,同步异步方法均可执行 export const useStore = defineStore('store', { state:()=>({ count:0, }), getters:{ }, actions:{ increaseCount(){ this.count++; } } })
- 挂载pinia到vue上,vue js入口文件,main.js中操作
import { createPinia } from 'pinia'; app.use(createPinia());
-
如何使用pinia
//在需要使用的组件中,引入刚才导出的变量 useStore,注意,该变量是defineStore返回的函数 import { useStore } from './store'; const authStore = useStore(); // 使用变量 console.log(authStore.count); // 调用方法 authStore.increaseCount();
-
数据持久化操作,避免页面刷新,数据就没了
- 这里推荐插件 pinia-plugin-persistedstate
-
// 安装依赖 npm install pinia-plugin-persistedstate // 在挂载pinia到vue前,配置持久化,main.js入口文件中操作 import { createPinia } from 'pinia'; // 引入持久化插件 import { createPersistedState } from 'pinia-plugin-persistedstate'; const pinia = createPinia(); pinia.use(createPersistedState({ serializer: { // 指定参数序列化器 serialize: JSON.stringify, deserialize: JSON.parse, } })); app.use(pinia);// 挂载pinia
-
// 创建一个store文件,对全局属性、方法变量进行管理 import { defineStore } from "pinia"; //defineStore返回一个函数进行调用,参数一为命名,参数二是对应的配置 //state 用于变量的存储,getters是计算属性,action是方法集合,同步异步方法均可执行 export const useStore = defineStore('store', { state:()=>({ count:0, }), getters:{ }, actions:{ increaseCount(){ this.count++; } }, // 持久化配置 persist: { key: 'store',//存储本地的名字 storage:window.localStorage,//存储地址,可选sessionStorage paths:['count'],//需要持久化的变量 }, })