一、安装pinia
npm i pinia
或
yarn add pinia
复制代码
二、引入pinia
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
// 引入pinia并实例化
import { createPinia } from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia).mount('#app')
复制代码
三、创建pinia
// 1.在src目录下创建 store 文件
// 2.新增 counter.ts 测试仓库,代码如下
// counter.ts
import { defineStore } from "pinia";
import { computed, ref } from 'vue'
// defineStore 接受两个参数
// 参数1:仓库的id(字符串)
// 参数2:options(对象)
export const useCounterStore = defineStore('counter', () => {
// 定义数据
const counter = ref(100)
// 定义计算属性
const counterComputer = computed(() => {
return counter.value * 2
})
// 定义方法
const add = () => {
counter.value++
}
return {
counter,
add,
counterComputer
}
})
复制代码
四、在vue文件中使用
<template>
<div>
<h1>数量:{
{ store.counter }}</h1>
<h2>计算属性:{
{ store.counterComputer }}</h2>
<button @click="store.add">点我加加</button>
<hr>
<h1>数量:{
{ counter }}</h1>
<h2>计算属性:{
{ counterComputer }}</h2>
<button @click="add">点我加加</button>
</div>
</template>
<script setup lang="ts">
import { useCounterStore } from './store/counter'
import { storeToRefs } from 'pinia';
// 普通用法
const store = useCounterStore()
// 解构用法
// 注意:方法可以直接解构使用,但ref、计算属性等直接解构使用,会失去响应式
// 若要解构ref、计算属性,需结合pinia提供的 storeToRefs 方法进行使用
const { add } = store
const { counter, counterComputer } = storeToRefs(store)
</script>
<style scoped>
</style>
复制代码
五、pinia数据持久化
- 安装插件
npm i pinia-plugin-persistedstate 或 yarn add pinia-plugin-persistedstate 复制代码
- 引入插件
// main.ts import { createApp } from 'vue' import App from './App.vue' // 引入pinia import { createPinia } from 'pinia' // 引入持久化插件 import persist from 'pinia-plugin-persistedstate' // 实例化pinia const pinia = createPinia() createApp(App) .use(pinia.use(persist)) // 注册插件 .mount('#app') 复制代码
- 在需要启用数据持久化的store文件中开启配置 persist:true
// counter.ts import { defineStore } from "pinia"; import { computed, ref } from 'vue' // defineStore第三个参数中启用持久化配置 // 当启用持久化后,pinia数据发生改变时,会自动将数据存到localStorage中 // 当页面刷新后,会自动读取localStorage export const useCounterStore = defineStore('counter', () => { const counter = ref(100) const add = () => { counter.value++ } const counterComputer = computed(() => { return counter.value * 2 }) return { counter, add, counterComputer } }, { persist: true // 开启pinia数据持久化 }) 复制代码
六、总结
pinia中定义的数据(如ref)可以类比为vuex中的state;
pinia中定义的计算属性可以类比为vuex中的getters;
pinia中定义的方法可以类比为vuex中的mutations、actions,区别在于pinia中没有区分同步和异步;
pinia中没有模块化的概念,每个ts文件都为一个全局仓库,不同于vuex仅有一个仓库;
相对于vuex的各种繁琐的api,pinia用法更简便