一、Pinia
1、介绍
1、介绍
Pinia是Vue最新的状态管理工具,是Vuex的替代品
2、变化
2.1、去掉了modules和mutation,每一个store都是一个独立的模块
2.2、actions即可提供异步,又可提供同步,且可直接修改state数据
2.3、提供更加符合、组合式风格的API
2、使用
1、安装
1.1、npm create vue@latest | 创建一个空的Vue3项目
1.2、yarn add pinia 或 npm install pinia | 安装pinia
1.3、在main.js中导入pinia
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
2、使用
2.1、定义Store
2.1.1、在src下创建store文件夹,用于存放模块
2.1.2、在模块中导入defineStore
2.1.3、示范
//@/store/counter.js
import { defineStore } from "pinia";
import { ref } from "vue";
// 定义store
// defineStore(仓库唯一标识 ,() => {...})
//定义变量名,以便于调用
//export用于导出
export const useCounterStore = defineStore('counter',() =>{
//声明数据 state - count
const count = ref(0)
//声明操作数据的方法 action (普通函数)
const addCount = () => count.value++
const downCount = () => count.value--
//声明基于数据派生的计算属性 getters (computed)
const double = computed(() => count.value * 2)
return {
count
}
})
3、仓库解构
1、问题
当仓库导入时想要以解构直接获取数据,会导致响应式丢失
2、原因
因为解构的赋值,相当于创建了一个新的属性,并给其赋值,所以会丢失响应性
3、解决方法
使用 storeToRefs(仓库)
如:const {name, Count} = storeToRefs(store)
4、注
只有属性需要使用storeToRefs,方法则不需要
4、Pinia持久化
https://prazdevs.github.io/pinia-plugin-persistedstate/
1、使用流程
1.1、安装插件pinia-plugin-persistedstate
npm i pinia-plugin-persistedstate
或
yarn add pinia-plugin-persistedstate
1.2、将插件添加到pinia实例上
main.js
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
1.3、用法
创建Store时,将persist选项设置为true
如:
export const useCounterStore = defineStore('counter',() =>{
const changeList = ref([])
return {
changeList,
}
},{
persist:true
//开启模块的持久化
})
2、配置
2.1、默认配置
· 使用 localStorage 进行存储
· store.$id 作为 storage 默认的 key
· 使用 JSON.stringifyJSON.parse 进行序列化/反序列化
· 整个 state 默认将被持久化
2.2、修改默认配置
//若想修改默认配置,可以将一个对象传递给STore的persist属性来配置持久化
如:
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => ({
someState: '你好 pinia',
}),
persist: {
// 在这里进行自定义配置
},
})
2.3、配置项解析
2.3.1、key
//用于指定key
type:string
default:store.$id
//使用方式
key:'my-key'
2.3.2、paths
//用于指定需要持久化的数据
type:string[]
default:undefined
//使用方式
paths:['count','save.me']