Pinia优势
Pinia是一个全新的Vue状态管理库，是Vuex的代替者，尤雨溪强势推荐
1.Vue2 和 Vue3 都能支持
2.抛弃传统的 Mutation ，只有 state, getter 和 action ，简化状态管理库
3.不需要嵌套模块，符合 Vue3 的 Composition api，让代码扁平化
4.Typescript支持
Pinia 基本使用
初始化项目： npm init vite@latest
安装Pinia: npm i pinia
挂载Pinia
import { createPinia } from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia)
创建Store
import { defineStore } from "pinia";
export const useStore = defineStore('main', {
state: () => {
return {
msg: 'hello world hhhh',
Number: 1
}
},
getters: {},
actions: {}
})
使用Store
<template>
<div>HelloWorld</div>
<div>{{store.msg}}</div>
</template>
<script setup lang="ts">
import { useStore } from "../index";
const store = useStore()
</script>
解构Store
当store中的多个参数需要被使用到的时候，为了更简洁的使用这些变量，我们通常采用结构的方式一次性获取所有的变量名
ES传统方式解构(能获取到值，但是不具有响应性)
<template>
<div>HelloWorld</div>
<div>{{ store.msg }}</div>
<div>{{ number }}</div>
<button @click="number++">+++</button>
</template>
<script setup lang="ts">
import { useStore } from "../index";
const store = useStore();
const { number } = store;
</script>
<style scoped></style>
Pinia解构方法：storeToRefs
<template>
<div>HelloWorld</div>
<div>{{ store.msg }}</div>
<div>{{ number }}</div>
<button @click="number++">+++</button>
</template>
<script setup lang="ts">
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 仓库中的 state
const change = () => {
store.$patch({
msg: 'hhhhhhhhhhhh',
number: store.number + 100
})
}
const change1 = () => {
store.$patch((state)=> {
state.msg = 'hhhhhhhhhhhh'
state.number = state.number + 100
})
}
Pinia中的Getters
Pinia 中的 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 的替代版，可以更好的兼容 Vue2，Vue3以及Typescript。在Vuex的基础上去掉了 Mutation，只保留了 state, getter和action。Pinia拥有更简洁的语法， 扁平化的代码编排，符合Vue3 的 Composition api
