一. 什么是pinia
Pinia是Vue的最新状态管理工具,是Vuex的替代品
二. 手动添加Pinia到Vue项目
在实际开发项目的时候,关于Pinia的配置,可以在项目创建时自动添加
现在我们初次学习,从零开始:
1. 创建项目
(1). 使用 Vite 创建一个空的 Vue3 项目
npm create vue@latest
(2). 进入项目安装依赖
cd 项目
npm install
(3). 创建模板
2. 安装 pinia 到项目中
(1). 按照官方文档安装pinia
npm install pinia
(2). main.js创建实例挂载
import { createApp } from 'vue'
import { createPinia } from 'pinia' // 导包
import App from './App.vue'
const pinia = createPinia() // 创建pinia实例
const app = createApp(App) // 创建根实例
app.use(pinia).mount('#app')
三. Pinia的基本语法
1. 新建仓库文件夹
2. 定义仓库,提供数据
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
// 定义store
// defineStore(仓库唯一标识,()=>{...})
export const useCounterStore = defineStore('counter', () => {
// 声明数据 state - count
const count = ref(100)
// 声明操作数据的方法 action(普通函数)
const addCount = () => count.value++
const subCount = () => count.value--
// 声明基于数据派生的计算属性 getters (computed)
const double = computed(() => count.value * 2)
// 声明数据 state - msg
const msg = ref('hello pinia')
return {
count,
msg,
addCount,
subCount,
double
}
})
3. 页面中使用
// Son1Com.vue
<script setup>
// 导入仓库
import {useCounterStore} from '@/store/counter'
const counterStore = useCounterStore()
</script>
<template>
<div>
<!-- 直接使用 -->
我是Son1-{{ counterStore.count }}-{{ counterStore.double }}
<button @click="counterStore.addCount">+</button>
</div>
</template>
<style scoped>
</style>
4. 代码示例
四. Pinia-action异步写法
编写方式: 异步action函数的写法和组件中获取异步数据的写法完全一致
需求: 在Pinia中获取频道列表数据并把数据渲染App组件的模板中
1. 安装axios
npm install axios
2. 定义仓库
// channel.js
import { defineStore } from 'pinia'
import { ref } from 'vue'
import axios from 'axios'
export const useChannelStore = defineStore('channel', () => {
// 声明数据
const channelList = ref([])
// 声明操作数据的方法
const getList = async () => {
//支持异步
const { data: { data } } = await axios.get('http://geek.itheima.net/v1_0/channels')
channelList.value = data.channels
console.log(data.channels)
}
// 声明getters相关
return {
channelList,
getList
}
})
3. 页面中调用
<script setup>
// 导入仓库
import {useChannelStore} from '@/store/channel'
const channelStore =useChannelStore()
</script>
<template>
<div>
<button @click="channelStore.getList">获取频道数据</button>
<ul>
<li v-for="item in channelStore.channelList" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<style scoped>
</style>
4. 代码示例
五. Pinia- storeToRefs方法
如果想要对仓库中的数据解构,需要使用storeToRefs方法
六. Pinia持久化
1. Pinia的调试
Vue官方的 dev-tools 调试工具对 Pinia直接支持,可以直接进行调试
2. Pinia持久化插件
官方文档: https://prazdevs.github.io/pinia-plugin-persistedstate/zh/
1.安装插件
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仓库中开启
// 定义store
// defineStore(仓库唯一标识,()=>{...})
export const useCounterStore = defineStore('counter', () => {
...
},{
// persist:true // 开启当前模块的持久化,仓库内全部持久化
persist:{
key: 'ccc-g', // 修改本地存储的唯一表示
paths:['count'] // 存储的事那些数据
}
})
4. 代码示例
5. 总结
(1).Pinia是用来做什么的?
新一代的状态管理工具,替代vuex
(2).pinia中还需要mutation吗?
不需要,action 既支持同步也支持异步
(3).Pinia如何实现getter?
computed计算属性函数
(4).pinia产生的Store如何解构赋值数据保持响应式?
storeToRefs
(5).Pinia 如何快速实现持久化?
pinia-plugin-persistedstate