Pinia与Vuex使用区别

仅用于记录Pinia与Vuex在用法上的区别。

一、重点关键属性

在关键属性上，pinia比vuex省去了不少内容。以下：

当然，他们的实例都叫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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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调用状态值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1.1 Vuex

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

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-persistedstate
1

2、使用

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  // ...
  plugins: [createPersistedState()],
});
1
2
3
4
5
6
7

2.2 Pinia

• 借助插件pinia-plugin-persist, 官方文档

1、安装

# npm安装
npm install pinia-plugin-persist -D
# 或者yarn
yarn add pinia-plugin-persist
1
2
3
4

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')

1
2
3
4
5
6
7
8
9
10
11

3、添加types说明

{
  "compilerOptions": {
    "types": [
      "pinia-plugin-persist"
    ]
  },
}
1
2
3
4
5
6
7