Pinia优势Pinia是一个全新的Vue状态管理库是Vuex的代替者尤雨溪强势推荐1.Vue2 和 Vue3 都能支持2.抛弃传统的 Mutation 只有 state, getter 和 action 简化状态管理库3.不需要嵌套模块符合 Vue3 的 Composition api让代码扁平化4.TypeScript支持Pinia 基本使用初始化项目npm init vitelatest安装Pinia:npm i pinia挂载Piniaimport { createPinia } from pinia const pinia createPinia() createApp(App).use(pinia)创建Storeimport { defineStore } from pinia; export const useStore defineStore(main, { state: () { return { msg: hello world hhhh, Number: 1 } }, getters: {}, actions: {} })使用Storetemplate divHelloWorld/div div{{store.msg}}/div /template script setup langts import { useStore } from ../index; const store useStore() /script解构Store当store中的多个参数需要被使用到的时候为了更简洁的使用这些变量我们通常采用结构的方式一次性获取所有的变量名ES传统方式解构(能获取到值但是不具有响应性)template divHelloWorld/div div{{ store.msg }}/div div{{ number }}/div button clicknumber/button /template script setup langts import { useStore } from ../index; const store useStore(); const { number } store; /script style scoped/stylePinia解构方法storeToRefstemplate divHelloWorld/div div{{ store.msg }}/div div{{ number }}/div button clicknumber/button /template script setup langts import { storeToRefs } from pinia; import { useStore } from ../index; const store useStore(); // const { number } store; const { number } storeToRefs(store); /script style scoped/style多条数据修改通过基础数据修改方式去修改多条数据也是可行的但是在 pinia 官网中已经明确表示$patch的方式是经过优化的会加快修改速度对性能有很大好处所以在进行多条数据修改的时候更推荐使用$patch$patch方法可以接受两个类型的参数函数 和 对象$patch 对象$patch 函数 通过函数方式去使用的时候函数接受一个 state 的参数state 就是 store 仓库中的 stateconst change () { store.$patch({ msg: hhhhhhhhhhhh, number: store.number 100 }) } const change1 () { store.$patch((state) { state.msg hhhhhhhhhhhh state.number state.number 100 }) }Pinia中的GettersPinia 中的 getter 和 Vue 中的计算属性几乎一样在获取 State值之前做一些逻辑处理getter 中的值有缓存特性如果值没有改变多次使用也只会调用一次添加 getter方法getters: { addNumber(state) { return state.number * state.number1 } }, div{{store.addNumber}}/div div{{store.addNumber}}/div div{{store.addNumber}}/div //多次调用也只会执行一次getter 中不仅可以传递 state 直接改变数据状态还可以使用 this 来改变数据,但要说明对应类型getters: { addNumber():any { // return state.number * state.number1 return this.msg } },store之间的相互调用在 Pinia 中可以在一个 store 中 import 另外一个 store 然后通过调用引入 store 方法的形式获取引入 store 的状态export const useStore defineStore(use, { state: () { return { msg: hello world hhhhxxx, number: 2, number1: 3 } }, getters: { addNumber():any { // return state.number * state.number1 return this.msg } }, actions: { } }) export const mainStore defineStore(main, { state: () { return { msg: hello world hhhh, number: 1 } }, getters: { addNumber() { console.log(useStore().msg); } }, actions: {} })总结总得来说Pinia 就是 Vuex 的替代版可以更好的兼容 Vue2Vue3以及TypeScript。在Vuex的基础上去掉了 Mutation只保留了 state, getter和action。Pinia拥有更简洁的语法 扁平化的代码编排符合Vue3 的 Composition api著作权归作者所有。