Pinia与Vuex使用区别

仅用于记录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