Vue3——Pinia

目录

什么是 Pinia？

为什么选择 Pinia？

基本使用

安装pinia

配置pinia

定义store

使用

持久化插件 

---

什么是 Pinia？

Pinia 是一个轻量级的状态管理库，专为 Vue 3 设计。它提供了类似 Vuex 的功能，但 API 更加简洁，并且完全支持 TypeScript。Pinia 的设计理念是简单、直观和可扩展，使其成为 Vue 3 生态系统中状态管理的理想选择。

官网：简介 | Pinia

为什么选择 Pinia？

1. 简单易用：Pinia 的 API 设计简洁，学习曲线平缓。
2. TypeScript 支持：Pinia 原生支持 TypeScript，提供更好的类型推断和开发体验。
3. 模块化设计：Pinia 允许你将状态拆分为多个模块，便于维护和扩展。
4. 插件系统：Pinia 支持插件系统，可以轻松扩展功能（如持久化存储）。

基本使用

pinia的使用步骤：

1. 在项目中安装pinia
2. 配置pinia到main.js中
3. 创建Store并导出
4. 在 其他组件中引入使用

安装pinia

    需要在控制台使用命令：npm install pinia

配置pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const app = createApp(App)
const pinia = createPinia() // 创建 Pinia 实例app.use(pinia) // 注册 Pinia
app.mount('#app')

定义store

    在src目录下新建目录stores，在里面创建一个js文件，这里命名为User.js。在该文件使用defineStore函数，定义store的名称，数据或方法，最后导出。具体代码如下：

import { ref, reactive } from "vue";
import { defineStore } from "pinia";export const UserStore = defineStore('UserStore', () => {const user = reactive({name: "张三",age: 19})const num = ref(0)const speak = () => {console.log("userstore");}return {user, num, speak}
})

使用

接下来去其他组件中使用定义好的store。

import { UserStore } from './stores/User';
const user = UserStore()
console.log(user.user.age);

使用pinia定义的数据是所有组件共享的，当某个组件改变了它的值，其他使用了该数据的组件内的值也会随之改变

持久化插件 

把pinia定义好的数据存储到本地的localstore中实现持。久化存储，这时需要使⽤⼀个插件：pinia-plugin-persistedstate。整体使用步骤和pinia差不多。

安装： npm i pinia-plugin-persistedstate

 配置:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate) // 注册持久化插件app.use(pinia)
app.mount('#app')

启用持久化：只需在defineStore加上一个参数即可：

---

示例：说明数据是共享的，以及数据的持久化

 user.js：

import { ref, reactive } from "vue";
import { defineStore } from "pinia";export const UserStore = defineStore('UserStore', () => {const user = reactive({name: "张三",age: 19})const num = ref(0)const speak = () => {console.log("userstore");}return {user, num, speak}
},{persist: true}
)

app.vue:

<script setup>
import { UserStore } from './stores/User';
import Son from './components/Son.vue';
const user = UserStore()
console.log(user.user.age);const add = ()=>{user.user.age++
}</script><template><div><router-view></router-view><button @click="add">修改一下store内的值</button><Son></Son></div>
</template><style scoped></style>

 

son.vue:

<script setup>
import { UserStore } from '../stores/User';
const user = UserStore()const asd=()=>{console.log(user.user.age);}
console.log(user.user.age);
</script><template><div><button @Click="asd">我是子组件的，点我打印store</button>{{ user.user.age }}</div>
</template><style scoped></style>