vue3中Pinia

slom_fxt

已于 2024-02-23 10:07:00 修改

阅读量900

点赞数 19

分类专栏： vue3 文章标签：前端 javascript 开发语言

于 2024-02-12 11:44:35 首次发布

本文链接：https://blog.csdn.net/slom_fxt/article/details/135989530

版权

vue3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、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 userStore

4.在组件中使用pinia

a.不结构state，通过pinia的actions去更改state

<template>
    <div class="A">
       <h1>A组件</h1> 
       <div>{{ store.token }}</div>
      <div>
        姓名：{{store.userInfo.name}} &nbsp;  年龄：{{ 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} = store

let 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}} &nbsp;  年龄：{{ 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=12
        state.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不是store
            return (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}} &nbsp;  年龄：{{ 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不是store
            return (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}} &nbsp; {{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不是store
            return (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']
        }]
    }
})