Pinia与Vuex使用区别
发布时间
阅读量：
阅读量
文章目录
-
-
一、重点关键属性
-
- 1.0 创建方式的不同
- 1.1 Vuex
- 1.2 Pinia
-
二、两者持久化存储方案（解决刷新后更新问题）
-
- 2.1 Vuex
- 2.2 Pinia
-
仅用于记录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' id1.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中username1.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.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-persistedstate2、使用
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-persist2、注入
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"
]
},
}全部评论 (0)
还没有任何评论哟~