我们可以说pinia是vuex的升级版本，当然官方尤大团队亲力推荐。未来必将会逐步流行。所以未雨绸缪，现在学习一下这个还是很有必要的。最近看了很多的文章，官方文档也看了一遍。还是觉得好记性不如烂笔头，所以趁着工作的闲暇，亲自再梳理一遍。加强一下记忆。
首先丢一个官网：
Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案
Pinia 支持 Vue2 和 Vue3
与vuex的比较
Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
特点
1、没有mutations了。
2、无需自定义支持Ts类型，它的所有内容都是类型化的。
3、不需要导入，调用函数。
4、没有module的嵌套结构
5、没有命名空间模块
安装
我这里是采用vite去新建vue项目，也可以通过vue-cli去新建。不过建议可以用vite去新建，因为vite速度更快，你启动项目或者当你对代码做出更改的时候会更加快速的得到响应，这对于程序员来说是很舒服的。具体的优势这里不多讨论，可以查阅vite官网。
npm install pinia
在main.js中进行引入
import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app')
在项目src目录下新建store文件夹，在store里面新建index.ts文件
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => ({
firstCounter: 12
})
})
// 这里的main相当于是一个id，每一个store独一无二的id。useStore名字可以是随意的。
state
在我们的组件中引入
import { useStore } from "../store";
在我们的组件里面进行使用
import { defineComponent,ref } from "vue"
import { useStore } from "../store";
import { storeToRefs } from 'pinia'
export default defineComponent({
setup(){
const count = ref(0);
const store = useStore()
const { firstCounter } = storeToRefs(store); // 这里不能直接解构，直接解构会使数据失去响应式，要用storeToRefs函数
return{
count,
firstCounter,
}
}
})
这里有个需要注意的地方，如果我们直接使用const { firstCounter } = useStore()去获取值的话，会使数据失去响应式。这里建议用pinia提供的storeToRefs的api去获取响应式的store值。除开这个你还可以用computed去获取响应式的数据：
computed(() => store.doubleCount)
改变值
直接改变store实例
const store = useStore()
store.counter++
调用$reset()，使其恢复初始状态
const store = useStore()
store.$reset()
getters
getter跟vuex的用法差不多，都是state的计算属性的方式。
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => ({
firstCounter: 12
}),
getters: {
doubleCount: (state) => state.firstCounter,
},
})
actions
actions相当于组件中的methods，里面既可以进行同步操作，也可以进行异步操作。
import { defineStore } from 'pinia'
// 定义一个异步函数模拟接口请求
function asyncFunction(){
return new Promise((res,rej)=>{
setTimeout(() => {
res(123)
}, 3000);
})
}
export const useStore = defineStore('main', {
state: () => ({
firstCounter: 12
}),
getters: {
doubleCount: (state) => state.firstCounter,
},
actions: {
// 同步方法
increment() {
this.firstCounter++
},
// 异步方法
async asyncFun(){
this.firstCounter = await asyncFunction()
}
},
})
在组件中：
import { defineComponent, ref, onMounted } from "vue";
import { useStore } from "../store";
import { storeToRefs } from "pinia";
export default defineComponent({
setup() {
const count = ref(0);
const store = useStore();
const { firstCounter } = storeToRefs(store); // 这里不能直接解构，直接解构会使数据失去响应式，要用storeToRefs函数
function showPinia() {
console.log("异步更改");
store.asyncFun();
}
onMounted(() => {});
return {
count,
firstCounter,
showPinia,
};
},
});
基本使用就到这里了，后续进行深层的研究。
