网站建设明薇通网络价格美丽百度热搜大数据

目录

1. 什么是Pinia

2. 手动添加Pinia到Vue项目

3. Pinia的基础使用

4. getters实现

5. action异步实现

6. storeToRefs工具函数

7. Pinia的调试

8. Pinia的持久化插件

---

1. 什么是Pinia

Pinia 是 Vue 专属的最新状态管理库 ，是 Vuex 状态管理工具的替代品

• 每个 Store 都是独立的，便于管理。
• 在Pinia中，action既支持同步修改state中的数据、也支持异步修改state中的数据
• 在Pinia中使用computed计算属性函数实现getter函数

2. 手动添加Pinia到Vue项目

后面在实际开发项目的时候，Pinia可以在项目创建时自动添加，现在我们初次学习，从零开始：

1. 使用 Vite 创建一个空的 Vue3项目

npm init vite@latest

1. 按照官方文档安装 pinia 到项目中

3. Pinia的基础使用

1. 定义store.js，然后在store去维护共享数据

2. 在组件中使用store模块的数据

4. getters实现

Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去

 

@/store/counter.js

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'// 定义创建store实例的函数,使用defineStore(仓库的唯一标识, () => { ... })函数
// 仓库的唯一标识一般取为store.js的文件名
// 在箭头函数中定义state、actions、getters
export const useCounterStore = defineStore('counter', () => {// 声明数据 state - countconst count = ref(100)// 声明操作数据的方法 action (直接就是定义普通函数的方式)const addCount = () => count.value++const subCount = () => count.value--// 声明基于数据派生的计算属性 getters (computed)const double = computed(() => count.value * 2)// 声明数据 state - msgconst msg = ref('hello pinia')//需要return，然后才能在其他组件中使用return {count,double,addCount,subCount,msg,}
}, {// persist: true // 开启当前模块的持久化persist: {key: 'hm-counter', // 修改本地存储的唯一标识paths: ['count'] // 用于指定state中的哪些数据需要被持久化}
})

Son1Com.vue

<script setup>
//1.导入useCounterStore函数
import { useCounterStore } from '@/store/counter'
//2.调用 useCounterStore() 时，会返回一个 store 实例。
const counterStore = useCounterStore()
//3.在模板中用仓库的state、action、getter时，直接和调用对象的属性或方法一样即可使用
</script><template><div>我是Son1.vue - {{ counterStore.count }} - {{ counterStore.double }}<button @click="counterStore.addCount">+</button></div>
</template><style scoped></style>

Son2Com.vue

<script setup>
import { useCounterStore } from '@/store/counter'
const counterStore = useCounterStore()
</script><template><div>我是Son2.vue - {{ counterStore.count }}<button @click="counterStore.subCount">-</button></div>
</template><style scoped></style>

5. action异步实现

方式：异步action函数的写法和组件中获取异步数据的写法完全一致

• 接口地址：http://geek.itheima.net/v1_0/channels

• 请求方式：get

• 请求参数：无

需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中

6. storeToRefs工具函数

使用storeToRefs函数可以辅助保持数据（state + getter）的响应式解构

7. Pinia的调试

Vue官方的 dev-tools 调试工具 对 Pinia直接支持，可以直接进行调试

8. Pinia的持久化插件

官方文档：Pinia Plugin Persistedstate

1.安装插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

2.使用 main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
// 导入持久化的插件
import persist from 'pinia-plugin-persistedstate'import App from './App.vue'
const pinia = createPinia() // 创建Pinia实例
const app = createApp(App) // 创建根实例
app.use(pinia.use(persist)) // pinia插件的安装配置
app.mount('#app') // 视图的挂载

3.配置 store/counter.js

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'export const useCounterStore = defineStore('counter', () => {...return {count,doubleCount,increment}
}, {persist: true   // 开启当前store.js模块的持久化，效果就是会将仓库中的全部state数据存储在本地
})

4.其他配置，看官网文档即可