一、pinia的简单使用
vuex和pinia的区别
参考网址：[Vuex] Vuex 5 by kiaking · Pull Request #271 · vuejs/rfcs · GitHub
1.pinia没有mutations，只有：state、getters、actions
2.pinia分模块不需要models（之前vuex分模块需要models）
3.TS支持的很好
4.pinia体积更小（性能更好）
5.pinia可以直接修改state数据
pinia的使用
1. npm i pinia
2. 在main.js中进行引用
import { createPinia } from 'pinia';
export const app = createApp(App)
app.use(createPinia());
3.在src下store文件下新建index.js
import { defineStore } from 'pinia' const userStore = defineStore({id: 'useStore',//id必须唯一state: () => {return {token: '123',userInfo: null,}},getters:{},actions: {setToken(token) {this.token = token},}, })export default userStore4.在组件中使用pinia
a.不结构state，通过pinia的actions去更改state
<template><div class="A"><h1>A组件</h1> <div>{{ store.token }}</div><div>姓名：{{store.userInfo.name}} 年龄：{{ store.userInfo.age }}</div><el-button type="success" @click="changeName()">修改名称</el-button></div> </template><script setup> import { userStore } from '../store/index.js'; const store = userStore() let {setName} = storelet changeName =()=>{setName('李四') }</script><style lang="scss"> .A{font-size: 30px;margin: 0 auto;text-align: center;.el-button{font-size: 30px;padding: 10px;height: 50px;} } </style>
b.结构state时候要使用storeToRefs去让它变成响应式数据从而改变
<template><div class="A"><h1>A组件</h1> <div>{{ token }}</div><div>姓名：{{userInfo.name}} 年龄：{{ userInfo.age }}</div><el-button type="success" @click="changeName()">修改名称</el-button></div> </template><script setup> import { storeToRefs } from 'pinia'; import { userStore } from '../store/index.js'; const store = userStore() let {token,userInfo,setName} = storeToRefs(store)let changeName =()=>{// userInfo.value.name='李四'//$patch批量修改store.$patch(state=>{console.log(state);state.userInfo.age=12state.userInfo.name='李四'}) }</script><style lang="scss"> .A{font-size: 30px;margin: 0 auto;text-align: center;.el-button{font-size: 30px;padding: 10px;height: 50px;} } </style>
c.pinia的getters
import { defineStore } from 'pinia' export const userStore = defineStore({id: 'useStore',state: () => {return {token: 'gdsiuafoi1234_key',userInfo: {name:"张三",age:18},}},getters:{//箭头函数--接受参数getNameInfo:state=>{//箭头函数中this不是storereturn (param)=>`${state.userInfo.name}今年已经${state.userInfo.age}岁了${param}`},getNameInfo1(state){return function(param){return `2.${state.userInfo.name}今年已经${state.userInfo.age}岁了${param}`}}} })<template><div class="A"><h1>A组件</h1> <div>{{ token }}</div><div>姓名：{{userInfo.name}} 年龄：{{ userInfo.age }}</div><div>{{getNameInfo('是吗？')}}</div><div>{{getNameInfo1('，对的')}}</div><el-button type="success" @click="changeName()">修改名称</el-button></div> </template><script setup>import { storeToRefs } from 'pinia'; import { userStore } from '../store/index.js'; const store = userStore() let {token,userInfo,setName,getNameInfo,getNameInfo1} = storeToRefs(store)</script><style lang="scss"> .A{font-size: 30px;margin: 0 auto;text-align: center;.el-button{font-size: 30px;padding: 10px;height: 50px;} } </style>
二、pinia的分模块化
在store文件下通过不同的js进行分模块拆分
user.js
import { defineStore } from 'pinia' export const user = defineStore({id: 'user',state: () => {return {token: 'gdsiuafoi1234_key',userInfo: {name:"张三",age:18},}},getters:{//箭头函数--接受参数getNameInfo:state=>{//箭头函数中this不是storereturn (param)=>`${state.userInfo.name}今年已经${state.userInfo.age}岁了${param}`},getNameInfo1(state){return function(param){return `2.${state.userInfo.name}今年已经${state.userInfo.age}岁了${param}`}}},actions: {setToken(token) {this.token = token},setName(name){this.userInfo.name=name}}, })shop.js
import { defineStore } from 'pinia' export const shop = defineStore({id: 'shop',state: () => ({shopList:['鞋子','衣服'] }),getters:{},actions: {}, })使用：
<template><div class="A"><h1>A组件</h1> <div>{{userInfo.name}} {{userInfo.age}}</div><div>{{getNameInfo('是吗？')}}</div><el-button type="success" @click="changeName()">修改名称</el-button><div>shopStore</div><div v-for="(el,index) in shopList" :key="index">{{el}}</div></div> </template><script setup>import { storeToRefs } from 'pinia'; import { user } from '../store/user.js'; import {shop} from '../store/shop.js' const userStore = user() const shopStore = shop() console.log(userStore); let { userInfo,getNameInfo } = storeToRefs(userStore) let { shopList } = storeToRefs(shopStore)const changeName = ()=>{// userInfo.value.name='李四'userStore.setName('李四') }</script><style lang="scss"> .A{font-size: 30px;margin: 0 auto;text-align: center;.el-button{font-size: 30px;padding: 10px;height: 50px;} } </style>
三、pinia的持久化存储
1.下载插件依赖：npm i pinia-plugin-persist -save
2.在store文件下新建index.js文件，再在main.js中引入并使用
import store from './store/index.js'; app.use(store);
idnex.js
import { createPinia } from 'pinia' //引入持久化插件 import piniaPluginPersist from 'pinia-plugin-persist'const store = createPinia() //使用插件 store.use(piniaPluginPersist) export default store在模块化中使用（user）
persist:{//是否启用持久化存储，不进行配置默认存储为session，刷新页面持久化了但是重新开启一个页面还是开始的值enabled:true}a.基础使用
创建 Store 时，将
persist选项设置为true，整个 Store 将使用默认持久化配置保存。默认持久化配置
使用 session进行存储
store.$id作为 storage 默认的 key
使用 JSON.stringify / JSON.parse进行序列化/反序列化
整个 state 默认将被持久发
b.高级使用
三个常用属性：
key：存储名称。
storage：存储方式。 sessionStorage 、localStorage
path：用于指定 state 中哪些数据需要被持久化。
[]表示不持久化任何状态，undefined或null表示持久化整个 state。import { defineStore } from 'pinia' export const user = defineStore({id: 'user',state: () => {return {token: 'gdsiuafoi1234_key',userInfo: {name:"张三",age:18},}},getters:{//箭头函数--接受参数getNameInfo:state=>{//箭头函数中this不是storereturn (param)=>`${state.userInfo.name}今年已经${state.userInfo.age}岁了${param}`},getNameInfo1(state){return function(param){return `2.${state.userInfo.name}今年已经${state.userInfo.age}岁了${param}`}}},actions: {setToken(token) {this.token = token},setName(name){this.userInfo.name=name}},persist:{//是否启用持久化存储，不进行配置默认存储为session，刷新页面持久化了但是重新开启一个页面还是开始的值enabled:true,strategies:[{key:'user_info',storage:localStorage,paths:['userInfo']}]} })
