Vue3中需要对状态进行公共管理,所以也需要使用 Vuex 的升级版 Pinia,其相比Vuex更加简洁方便,无需 mutations
1. 安装 Pinia
npm install pinia
在 main.js 中引入,并使用,需要用 Vue3 的 链式调用
import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app')
2. 配置 Pinia 的 Store
从 pinia 中引入 defineStore ,对 Pinia 的 state 和 actions 进行初步设置
state:公共仓库的数据
actions:更改仓库数据的方法
import { defineStore } from "pinia";
const useCounterStore = defineStore('counterStore', {
state() {
return {
count: 666
}
},
actions: {
add() {
this.count++
}
}
})
export default useCounterStore
3. 组件中使用 Pinia
需要引入 Pinia 进行公共数据管理的组件,引入 store ,并且调用这个函数
import useCounterStore from "../store/counterStore";
const counterStore = useCounterStore();
使用 state:
import { storeToRefs } from "pinia";
// 解构state数据 解构完了后会失去响应式 ,需要去pinia里面引入 storeToRefs
const { count } = storeToRefs(counterStore);
<div>{{ count }}</div>
正常直接调用出state也行,例如 {{counterStore.state}} 但是代码麻烦,所以解构出来方便,但是解构完的 state又会失去响应式,所以还需要对其重新赋予响应式,从 pinia 里面引入 storeToRefs ,将其 state 的数据重新转换为响应式
使用actions:
// 解构actions的方法
const add = counterStore.add;
<button @click="add">add</button>
### 总结:Pinia 比起 Vuex 省略了 mutations 的功能,去更改公共管理数据更加简洁方便,任何组件都可以直接从 Pinia 中获取数据,修改数据
PS:个人感觉,你说 Vuex 弱化了 Redux 的 Reducer功能,将其异步的处理逻辑单独分出来用actions 来实现,后面 Redux 也来 Redux-thunk / Redux-saga 重新补回了这个异步处理的功能,包括 Dva.js 一样也是,好家伙,现在 Pinia 又重新回去了,变成了 Redux 的样子,来来回回,挺有意思的