仅用于记录Pinia与Vuex在用法上的区别。
一、重点关键属性
在关键属性上,pinia比vuex省去了不少内容。以下:
状态管理器 | 关键属性 |
---|---|
Vuex | Store、State、Getter、Mutation、Action、Module |
Pinia | Store、State、Getter、Action |
当然,他们的实例都叫Store(包含整个应用中访问的数据)。但相比于Vuex全局维护一个Store实例,Pinia以应用模块(即vuex的module)为单位通过defineStore来单独创建store实例。
目录上的小小差异:
# Vuex 示例(假设是命名模块)。
src
└── store
├── index.js # 初始化 Vuex,导入模块
└── modules
├── module1.js # 命名模块 'module1'
└── nested
├── index.js # 命名模块 'nested',导入 module2 与 module3
├── module2.js # 命名模块 'nested/module2'
└── module3.js # 命名模块 'nested/module3'
# Pinia 示例,注意 ID 与之前的命名模块相匹配
src
└── stores
├── index.js # (可选) 初始化 Pinia,不必导入 store
├── module1.js # 'module1' id
├── nested-module2.js # 'nested/module2' id
├── nested-module3.js # 'nested/module3' id
└── nested.js # 'nested' id
1.0 创建方式的不同
Vuex
import { createApp } from 'vue'
import { createStore } from 'vuex'
const store = createStore({
state(){
return { count: 0}
},
mutations: {},
getters:{},
actions:{}
})
const app = createApp({/* 根组件 */})
app.use(store)
// 随后通过引入的store实例或全局挂载到vue属性中,通过store.state.xxx调用状态值
Pinia
// 1、在vue中注入。 main.js
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、useStore.js 定义一个pinia的store
import {defineStore} from 'pinia'
export const useStore = defineStore('main', {
state: ()=>{},
getters:{},
actions:{}
})
// 3、最后在各组件中
import {useStore }from '@/store/useStore'
const store = useStore()
store.username // 对应state中username
1.1 Vuex
Vuex 使用单一状态树(用一个对象包含了全部的应用层级 状态),因此它便作为一个“唯一数据源(SSOT)”而存在。而通过模块化modules来细化到每个小应该模块的状态管理。
- State: 存储在Vuex中的数据(规则与vue实例中的data相同)。组件通过mapState辅助函数方便的将state生成为计算属性
- Getter:基于State派生出的计算属性(可以理解为store的计算属性)。接收state为参数,返回对应的计算值。辅助函数mapGetters用于将getter映射到组件计算属性中
- Mutation:这是更改store中的状态的唯一方法(同步函数 )。类似于事件,在mutations中声明函数,通过store.commit(‘xxx’)调用。
- Action:Action可以包含任意异步操作,并在合适的时机提交mutation用于变更状态。在actions中声明函数,通过store.dispatch(‘xxx’)调用分发Action。辅助函数mapActions
- Module:因为使用的是单一状态树,为了避免应用过大而臃肿,于是可以将store分割成模块(module)。每个模块拥有自己的state,mutation,action,getter、基于嵌套子模块。
1.2 Pinia
- State:一个返回初始状态的函数。(与vuex的state相似)。访问通过 useStore.xxx 。重置初始值useStore. r e s e t ( ) . 【 u s e S t o r e 为 通 过 d e f i n e S t o r e 定 义 的 某 个 s t o r e 】 。 辅 助 函 数 m a p S t a t e 、 m a p W r i t a b l e S t a t e 。 变 更 s t a t e 方 法 ( s t o r e . reset().【useStore为通过defineStore定义的某个store】。辅助函数 mapState、mapWritableState。变更state方法(store. reset().【useStore为通过defineStore定义的某个store】。辅助函数mapState、mapWritableState。变更state方法(store.patch)
- Getter:state的计算属性值。访问直接通过useStore.xxx。通过this访问整个store实例
- Action:相当于组件中的 method,通过this访问整个store实例。里面可以是同步的,也可以是异步的方法
二、两者持久化存储方案(解决刷新后更新问题)
2.1 Vuex
- 借助插件
vuex-persistedstate
, vuex-persistedstate文档
1、安装
npm install --save vuex-persistedstate
2、使用
import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";
const store = createStore({
// ...
plugins: [createPersistedState()],
});
2.2 Pinia
- 借助插件
pinia-plugin-persist
, 官方文档
1、安装
# npm安装
npm install pinia-plugin-persist -D
# 或者yarn
yarn add pinia-plugin-persist
2、注入
import {createApp} from 'vue'
import {createPinia} from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
import App from './App.vue'
const pinia = createPinia()
pinia.use(piniaPersist)
const app = createApp(App)
app.use(pinia).mount('#app')
3、添加types说明
{
"compilerOptions": {
"types": [
"pinia-plugin-persist"
]
},
}