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

Vuex 3和4详解

Vuex 3

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

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

Vuex 4

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

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

Pinia详解

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

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