pinia的使用

目录

pinia与vuex的区别

1、安装pinia

2.使用

3、定义仓库实例

4、多模块合一

5、storeToRefs()

6、pinia持久化插件

---

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

pinia与vuex的区别

vuex： state,mutations,actions,getters,modules 五个模块

对ts支持不好

pinia核心概念 ： state ， actions， getters 三个模块

对ts支持好

1、安装pinia

yarn add pinia
# 或者使用 npm
npm install pinia

2.使用

在main.js中导入创建pinia的函数，创建pinia实例，并使用

import { createApp } from 'vue'
//导入创建pinia的函数
import { createPinia } from 'pinia'
import App from './App.vue'
//创建一个 pinia 实例 (根 store) 并将其传递给应用：
const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

?

3、定义仓库实例

Store 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字

定义store仓库，其中只有state，getters，actions三个模块，并导出store实例，返回值是创建store实例的方法

第一个参数，store的唯一标识， 类似于模块
第二个参数， 对象描述仓库可以提供state，getters，actions
返回值 是创建store实例的方法
规范 ?userXXXXStore

store/user.js

//1.定义用户仓库
import {defineStore} from 'pinia'
//defineStore() 创建store实例的函数
//第一个参数，store的唯一标识， 类似于模块
//第二个参数， 对象描述仓库可以提供state，getters，actions
//返回值 是创建store实例的方法
//规范  userXXXXStore
const useUserStore= defineStore('user',{
    //state,getters,actions
    state:()=>{
        return {
            usserInfo:{
                username:'admin',
                age:20
            }
		}
	},
    getters:{
        upperCase(){
            return this.userInfo.username.toUpperCase()
		}
        
    },
    actions:{
        //同步异步都可以写
        changeName(){
            this.userInfo.username='lihua'
		},
        chagneName2(){
            setTimeout(()=>{
                this.userInfo.username='zs666'
            },2000)
		}
    }
})
//导出user仓库实例的方法
export default useUserStore

在App.vue组件中使用

只需要导入创建store的实例，并声明

store实例的属性和方法可以直接 实例名.属性或方法直接使用

<template>
    <div>
<p>{{ userStore.userInfo.username }}</p>
<button @click="userStore.changeName">changName</button>
<button @click="userStore.changeName2">changeName2</button>
<p>{{ userStore.upperCase }}</p>
    </div>
</template>

<script setup>
import useUserStore from './store/user'
const userStore=useUserStore()
console.log(userStore.userInfo)


</script>

<style lang="scss" scoped>

</style>

4、多模块合一

如果定义的store实例有很多，就需要一个一个导入，很麻烦，我们可以将创建的多个模块的store实例用一个文件来管理，这样在组件中使用就可以只导入一个模块，要用的那个模块的内容，可以进行对象解构

store/index.js

import useUserStore from "./user";
import useCounterStore from "./counter";
export default function useStore(){
    return{
        user:useUserStore(),
        counter:useCounterStore()
    }
}

store/count.js

// 定义用户仓库
import { defineStore } from 'pinia'
// defineStore() 创建store实例的函数 
// 第一个参数 store的唯一标识 类似于模块
// 第二个参数 对象描述仓库可以提供state getters actions
// 返回值 是创建store实例的方法
// 规范 useXXXXStore
const useCounterStore = defineStore('counter',{
  // state getters actions
  state: ()=> {
    return  {
      num: 0
    }
  },
  getters:  {
    
  },
  actions: {
    increaseNum() {
      this.num++
    }
  }
})

// 导出user仓库实例的方法
export default useCounterStore

App.vue

<template>
    <div>
<p>{{ userStore.userInfo.username }}</p>
<button @click="userStore.changeName">changName</button>
<button @click="userStore.changeName2">changeName2</button>
<p>{{ userStore.upperCase }}</p>
<p>{{counter.num}}</p>

    </div>
</template>

<script setup>
import useUserStore from './store/user'
import useStore from './store'
// import {storeToRefs} from 'pinia'

const userStore=useUserStore()
// const userStore=useUserStore()
console.log(userStore.userInfo)
// const {counter}=useStore()
//storeToRefs() 让仓库实例解构不会丢失响应式
// const {num}=storeToRefs(counter)
const {counter}=useStore()

</script>

<style lang="scss" scoped>

</style>

5、storeToRefs()

storeToRefs() 让仓库实例解构不会丢失响应式

App.vue

<template>
    <div>
<p>{{ userStore.userInfo.username }}</p>
<button @click="userStore.changeName">changName</button>
<button @click="userStore.changeName2">changeName2</button>
<p>{{ userStore.upperCase }}</p>
<p>{{num}}</p>

    </div>
</template>

<script setup>
import useUserStore from './store/user'
import useStore from './store'
import {storeToRefs} from 'pinia'
const userStore=useUserStore()
console.log(userStore.userInfo)
const {counter}=useStore()
//storeToRefs() 让仓库实例解构不会丢失响应式
const {num}=storeToRefs(counter)
</script>
<style lang="scss" scoped>
</style>

6、pinia持久化插件

安装

npm i pinia-plugin-persist

?store/index.js

import useUserStore from "./user";
import useCounterStore from "./counter";
import { createPinia } from 'pinia'
//导入pinia插件
import piniaPersist from 'pinia-plugin-persist'
//创建pinia实例
const pinia = createPinia()
pinia.use(piniaPersist)
export{pinia}
export default function useStore(){
    return{
        user:useUserStore(),
        counter:useCounterStore()
    }
}

store/user.js

//定义用户仓库
import {defineStore} from 'pinia'
const useUserStore=defineStore('user',{
    state:()=>{
        return{
            userInfo:{
                username:'admin',
                age:20
            }
        }
    },
    getters:{
        upperCase(){
            return this.userInfo.username.toUpperCase()
        }
    },
    actions:{
        changeName(){
            return this.userInfo.username='english'
        },
        changeName2(){
            setTimeout(()=>{
                this.userInfo.username='math6666'
            },2000)
         
        }
    },
  persist: {
    enabled: true,
    strategies: [
      { storage: localStorage,//存储的类型
       paths: ['num'] //持久化的的内容，不填，全部存储
      }

    ],
  },

})
export default useUserStore