文章目录

• • 一、重点关键属性
  • • 1.0 创建方式的不同
    • 1.1 Vuex
    • 1.2 Pinia
  • 二、两者持久化存储方案（解决刷新后更新问题）
  • • 2.1 Vuex
    • 2.2 Pinia

仅用于记录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.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官方文档

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.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"]},
}