基本介绍

Pinia 是 Vue.js 的轻量级状态管理库

官方网站：Pinia | The intuitive store for Vue.js

 

为什么学习pinia?

• pinia和vuex4一样，也是vue官方的状态管理工具(作者是 Vue 核心团队成员）

• pinia相比vuex4，对于vue3的兼容性更好

• pinia相比vuex4，具备完善的类型推荐

• pinia同样支持vue开发者工具,最新的开发者工具对vuex4支持不好

• Pinia 的 API 设计非常接近 Vuex 5 的提案。

pinia核心概念

• state: 状态

• actions: 修改状态（包括同步和异步，pinia中没有mutations）

• getters: 计算属性

基本使用与state 

（1）安装

yarn add pinia
# or
npm i pinia

（2）在main.js中挂载pinia

import { createApp } from 'vue'
import App from './App.vue'import { createPinia } from 'pinia'
const pinia = createPinia()createApp(App).use(pinia).mount('#app')

（3）新建文件store/counter.js

import { defineStore } from 'pinia'
// 创建store,命名规则： useXxxxStore
// 参数1：store的唯一表示
// 参数2：对象，可以提供state actions getters
const useCounterStore = defineStore('counter', {state: () => {return {count: 0,}},getters: {},actions: {},
})export default useCounterStore

(4) 在组件中使用

<script setup>
import useCounterStore from './store/counter'const counter = useCounterStore()
</script><template><h1>根组件---{{ counter.count }}</h1>
</template><style></style>

actions的使用

目标：掌握pinia中actions的使用

在pinia中没有mutations，只有actions，不管是同步还是异步的代码，都可以在actions中完成。

（1）在actions中提供方法并且修改数据

import { defineStore } from 'pinia'
// 1. 创建store
// 参数1：store的唯一表示
// 参数2：对象，可以提供state actions getters
const useCounterStore = defineStore('counter', {state: () => {return {count: 0,}},actions: {increment() {this.count++},incrementAsync() {setTimeout(() => {this.count++}, 1000)},},
})export default useCounterStore

 （2）在组件中使用

<script setup>
import useCounterStore from './store/counter'const counter = useCounterStore()
</script><template><h1>根组件---{{ counter.count }}</h1><button @click="counter.increment">加1</button><button @click="counter.incrementAsync">异步加1</button>
</template>

getters的使用

pinia中的getters和vuex中的基本是一样的，也带有缓存的功能

（1）在getters中提供计算属性

import { defineStore } from 'pinia'
// 1. 创建store
// 参数1：store的唯一表示
// 参数2：对象，可以提供state actions getters
const useCounterStore = defineStore('counter', {state: () => {return {count: 0,}},getters: {double() {return this.count * 2},},actions: {increment() {this.count++},incrementAsync() {setTimeout(() => {this.count++}, 1000)},},
})export default useCounterStore

(2)在组件中使用

<h1>根组件---{{ counter.count }}</h1><h3>{{ counter.double }}</h3>

storeToRefs的使用

目标：掌握storeToRefs的使用

如果直接从pinia中解构数据，会丢失响应式， 使用storeToRefs可以保证解构出来的数据也是响应式的

<script setup>
import { storeToRefs } from 'pinia'
import useCounterStore from './store/counter'const counter = useCounterStore()
// 如果直接从pinia中解构数据，会丢失响应式
const { count, double } = counter// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count, double } = storeToRefs(counter)
</script>

pinia模块化

在复杂项目中，不可能吧多个模块的数据都定义到一个store中，一般来说会一个模块对应一个store，最后通过一个根store进行整合

（1）新建store/user.js文件

import { defineStore } from 'pinia'const useUserStore = defineStore('user', {state: () => {return {name: 'zs',age: 100,}},
})export default useUserStore

(2)新建store/index.js

import useUserStore from './user'
import useCounterStore from './counter'// 统一导出useStore方法
export default function useStore() {return {user: useUserStore(),counter: useCounterStore(),}
}

（3）在组件中使用

<script setup>
import { storeToRefs } from 'pinia'
import useStore from './store'
const { counter } = useStore()// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count, double } = storeToRefs(counter)
</script>

持久化

（1）订阅store中数据的变化

const { todos } = useStore()
todos.$subscribe(() => {localStorage.setItem('todos', JSON.stringify(todos.list))
})

（2）获取数据时从本地缓存中获取

state: () => ({list: JSON.parse(localStorage.getItem('todos')) || [],
}),