Vue的状态管理——Vuex3&4&Pinia

GISer_Jing2024-08-31 20:26

Vue3中Vuex的使用_vue3 vuex-CSDN博客

VueX详解_组合式vuex-CSDN博客

15分钟学会Pinia

Vuex 3和4详解

Vuex 3

Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。以下是Vuex 3的一些关键特性：

  1. 状态集中管理：Vuex 3的状态是集中存储的，所有的状态都放在一个树状结构中，并且只能通过mutations来修改状态。
  2. 响应式状态：当状态发生改变时，相关的组件会自动更新。
  3. 模块化：虽然Vuex 3本身不支持模块热替换，但可以通过将状态划分为不同的模块来提高代码的可维护性和可扩展性。
  4. 插件系统 ：Vuex 3的插件接口相对简单，通过store的subscribe方法来监听全部的状态变化。

Vuex 4

Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。以下是Vuex 4的一些新特性：

  1. 状态分割和模块热替换：Vuex 4引入了状态分割和模块热替换的概念，状态可以分割成多个模块，每个模块拥有自己的状态、操作和订阅。这种分割的方式有助于组织和维护大型应用中的状态，并且可以通过热替换来动态添加或移除模块。
  2. 响应式状态管理改进 ：Vuex 4通过引入markRaw和shallowRef的概念，对响应性进行进一步改进。使用markRaw可以标记一个对象为非响应式的，使用shallowRef可以创建一个浅响应式对象，如果浅响应式对象的属性变化，不会触发组件的更新。
  3. 插件接口改进 ：Vuex 4通过引入subscribeAction、subscribeMutation和subscribeGetter方法来对插件接口进行改进，使得开发者可以更加细粒度地对应用程序的状态进行监听和处理。
  4. 性能优化：Vuex 4减少了状态变化时的不必要计算和更新，提高了性能。
  5. TypeScript支持：Vuex 4支持TypeScript，提供了更好的类型检查和开发工具支持。

Pinia详解

Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。以下是Pinia的一些关键特性：

  1. 状态管理：Pinia提供了一个集中的位置来存储和管理应用程序的状态。
  2. 模块化状态：Pinia支持将状态划分为不同的模块，以提高代码的可维护性和可扩展性。每个模块可以包含自己的状态、getters、mutations和actions。
  3. 状态订阅：Pinia允许开发者订阅状态的变化，并在状态发生变化时触发相应的回调函数。
  4. 缓存和持久化：Pinia支持缓存状态数据以提高性能，并支持将状态数据持久化到本地存储或后端数据库中。
  5. 与Vue.js生态系统无缝集成：Pinia与Vue.js的其他工具和库配合良好，可以轻松地与Vue Router等一起使用。
  6. 轻量级：Pinia非常轻巧，只有大约1kb的大小。
  7. 类型安全：通过类型推断，Pinia可以提供自动完成的功能。
  8. Vue Devtools支持：Pinia支持Vue Devtools，可以方便地进行调试。

Vuex 3、Vuex 4与Pinia的对比表格

特性/库 Vuex 3 Vuex 4 Pinia
Vue版本兼容性 Vue 2.x Vue 3.x Vue 3.x
状态管理方式 集中存储，通过mutations修改 集中存储，支持状态分割和模块热替换 集中存储，模块化设计
响应式状态管理 响应式，自动更新组件 引入markRaw和shallowRef进行改进 响应式，自动更新组件
插件接口 简单，通过subscribe监听全部状态变化 改进，引入subscribeAction、subscribeMutation和subscribeGetter 灵活，支持多种扩展方式
TypeScript支持 无原生支持，但可配合工具使用 原生支持，提供更好的类型检查和开发工具支持 原生支持，提供类型安全
模块化 支持，但无模块热替换 支持状态分割和模块热替换 支持模块化状态管理
缓存和持久化 需要额外插件或手动实现 类似Vuex 3，可能需要额外插件或手动实现 内置支持缓存和持久化
性能优化 依赖于Vue 2.x的性能优化 进一步优化了状态变化的计算和更新 轻量化设计，性能良好
生态系统支持 成熟，广泛应用于Vue 2.x项目 逐渐完善，适用于Vue 3.x项目 适用于Vue 3.x项目，新兴但受欢迎
学习曲线 相对较陡峭，API较为复杂 类似于Vuex 3，但引入了新特性和改进 较简单，更直观，易于上手

Vuex 3 示例

安装 Vuex 3（注意：Vue 3 项目通常不使用 Vuex 3，但为了完整性，这里仍提供示例）

对于 Vue 2 项目，你可以安装 Vuex 3：

复制代码 
npm install vuex@3 --save

配置 Vuex Store（Vue 2 示例）

在 Vue 2 项目中，你可能会在 src/store/index.js 中设置 Vuex store：

复制代码 
import Vue from 'vue'; 
import Vuex from 'vuex'; 


Vue.use(Vuex); 


export default new Vuex.Store({ 
state: { 
count: 0 
}, 
mutations: { 
increment(state) { 
state.count++; 
} 
}, 
actions: { 
incrementIfOddOnRootSum({ state, commit, rootState }) { 
if ((state.count + rootState.otherCount) % 2 === 1) { 
commit('increment'); 
} 
} 
}, 
modules: { 
// 模块可以在这里定义 
} 
});

在 Vue 组件中使用 Vuex 3：

复制代码 
<template> 
<div>{{ count }}</div> 
<button @click="increment">Increment</button> 
</template> 


<script> 
export default { 
computed: { 
count() { 
return this.$store.state.count; 
} 
}, 
methods: { 
increment() { 
this.$store.commit('increment'); 
} 
} 
} 
</script>

注意：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。

Vuex 4 示例

安装 Vuex 4

对于 Vue 3 项目，安装 Vuex 4：

复制代码 
npm install vuex@next --save # 或使用 vuex@4

import { createStore } from 'vuex'; 


export default createStore({ 
state() { 
return { 
count: 0 
}; 
}, 
mutations: { 
increment(state) { 
state.count++; 
} 
}, 
actions: { 
incrementIfOdd({ commit, state }) { 
if (state.count % 2 === 1) { 
commit('increment'); 
} 
} 
}, 
modules: { 
// 模块可以在这里定义 
} 
});

配置 Vuex Store（Vue 3 示例）

在 Vue 3 项目中，你可能会在 src/store/index.js 或 src/store/index.ts 中设置 Vuex store：

在 Vue 组件中使用 Vuex 4（与 Vuex 3 类似，但通常是在 Vue 3 上下文中）：

复制代码 
<template> 
<div>{{ count }}</div> 
<button @click="increment">Increment</button> 
</template> 


<script> 
import { useStore } from 'vuex'; 


export default { 
setup() { 
const store = useStore(); 


const count = computed(() => store.state.count); 


const increment = () => { 
store.commit('increment'); 
}; 


return { count, increment }; 
} 
} 
</script>

注意这里使用了 Vue 3 的 Composition API。

Pinia 示例

安装 Pinia

复制代码 
npm install pinia --save

配置 Pinia Store

在 Vue 3 项目中，你可以在 src/stores/index.js 或 src/stores/index.ts 中设置 Pinia store：

复制代码 
import { defineStore } from 'pinia'; 


export const useCounterStore = defineStore('counter', { 
state: () => ({ 
count: 0 
}), 
actions: { 
increment() { 
this.count++; 
} 
} 
});

在 Vue 组件中使用 Pinia：

vue复制代码

复制代码 
<template> 
<div>{{ count }}</div> 
<button @click="increment">Increment</button> 
</template> 


<script> 
import { useCounterStore } from '@/stores/index'; 


export default { 
setup() { 
const store = useCounterStore(); 


const count = computed(() => store.count); 


const increment = () => { 
store.increment(); 
}; 


return { count, increment }; 
} 
} 
</script>

同样，这里也使用了 Vue 3 的 Composition API。注意，Pinia 的用法与 Vuex 4 在 Composition API 上下文中非常相似，但 Pinia 的 API 和概念可能更加直观和易于理解。

相关推荐
kyriewen1 小时前
面试官问你：“AI 能写 80% 的代码了，公司为什么还需要你？”
前端·javascript·面试
甲维斯2 小时前
又升级咯！坦克大战2026，科技与复古并存！
前端·人工智能·游戏开发
Goodbye4 小时前
从 Token 到 Embedding：LLM 核心基础深度解析
javascript·人工智能
用户938515635074 小时前
工具调用背后：LLM 如何突破“缸中大脑”，操控真实世界？
javascript·人工智能
Goodbye4 小时前
从函数到智能：LLM Tool Use 深度解析
javascript·人工智能
半个落月4 小时前
大模型到底是怎么“调用工具”的？从一个 Node.js Demo 看懂 Tool Use
javascript·人工智能
搬砖的码农4 小时前
(08)为什么我的 Agent 一跑后台服务就卡死
前端·agent·ai编程
飘尘4 小时前
前端转全栈（Java 后端）必须要知道的：开发中的锁机制与分布式并发控制
前端·后端·全栈
烬羽4 小时前
中英文 token 数量差一倍？两段 JS 代码搞懂 LLM 底层是怎么"读"文字的
javascript·程序员·架构
热门推荐
012026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf032026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？04Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析05【AI】2026 年具身智能模型和世界模型总结06GitHub 镜像站点07【AI总结】2026年6月 主流国内外大模型总结08飞书长连接_事件订阅（接收消息，审批任务状态变更）09Trae国际版与国内版深度测评：AI原生IDE的双生花10AI科技热点日报 | 2026年6月1日