【Vue与React】VueX与Pinia的不同、Redux和mobx的不同

pinia和vuex区别 (baidu.com)

VueX与Pinia

Pinia是一个轻量级的状态管理库，它专注于提供一个简单的API来管理应用程序的状态。相比之下，Vuex是一个更完整的状态管理库，它提供了更多的功能，比如模块化、插件和严格模式等。

Pinia是基于Vue 3的Composition API构建的，这使得它更加灵活和可组合。而Vuex则是基于Vue 2的Options API构建的，因此在某些方面可能会受到限制。

Pinia采用了类似于React Hooks的方式来管理状态，这使得它更加直观和易于使用。Vuex则采用了一种基于mutations和actions的方式来管理状态，这可能需要更多的代码来实现相同的功能。

VueX

VueX的使用

详解Pinia和Vuex-CSDN博客

vuex中的流程是首先actions一般放异步函数，拿请求后端接口为例，当接口返回值的时候，actions会提交一个mutations中的函数，然后这个函数对vuex中的状态（state)进行一个修改，组件中再渲染这个状态，从而实现整个数据流程都在vuex内部进行便于检测

import { createStore } from "vuex";
export default createStore({
  strict: true,
  //全局state，类似于vue种的data
  state() {
    return {
      vuexmsg: "hello vuex",
    }
  },
  //修改state函数
  mutations: {
    setVuexMsg(state, data) {
      state.vuexmsg = data;
    },
  },
  //提交的mutation可以包含任意异步操作
  actions: {
    async getState({ commit }) {
      //const result = await xxxx 假设这里进行了请求并拿到了返回值
      commit("setVuexMsg", "hello csdn");
    },
  }
});

组件中使用dispatch进行分发actions

<template>
  <div>{{ vuexStore.state.vuexmsg }}</div>
</template>
<script setup>
    import { useStore } from 'vuex'
    let vuexStore = useStore()
    vuexStore.dispatch('getState')
</script>

也可以组件内部直接提交mutations

import { createStore } from "vuex";
 
export default createStore({
  strict: true,
  //全局state，类似于vue种的data
  state: {
    vuexmsg: "hello vuex",
  },
  //修改state函数
  mutations: {
    setVuexMsg(state, data) {
      state.vuexmsg = data;
    },
  },
  //提交的mutation可以包含任意异步操作
  actions: {},
  //类似于vue中的计算属性
  getters: {},
  //将store分割成模块（module）,应用较大时使用
  modules: {},
});

// 组件内部
<template>
  <div>{{ vuexStore.state.vuexmsg }}</div>
</template>
<script setup>
    import { useStore } from 'vuex'
    let vuexStore = useStore()
    vuexStore.commit('setVuexMsg', 'hello juejin')
    console.log(vuexStore.state.vuexmsg) //hello juejin
</script>

Vuex 的优点

1. 更加成熟：Vuex 是一个比较成熟的状态管理库，它已经被广泛使用和测试。
2. 更加稳定：Vuex 的稳定性也比 Pinia 更高，因为它已经经过了多个版本的迭代和改进。
3. 更加强大：Vuex 提供了一些高级功能，如中间件和插件，使得它可以处理更加复杂的状态管理需求。

Vuex 的缺点

1. 学习曲线较陡峭：Vuex 的概念比较复杂，因此学习曲线比较陡峭。
2. 繁琐：Vuex 在处理一些简单的状态管理需求时可能会有些繁琐，因为它需要使用一些复杂的概念和 API。

Pinia

Pinia的使用

相比于Vuex，Pinia是可以直接修改状态的，并且调试工具能够记录到每一次state的变化。如App.vue。同时，Pinia去掉了mutations,所以在actions中修改state就行

import { defineStore } from "pinia";
export const storeA = defineStore("storeA", {
  state: () => {
    return {
      piniaMsg: "hello pinia",
      name: "xx",
    };
  },
  actions: {
    setName(data) {
      this.name = data;
    },
  },
});

// 1. 直接修改state
<template>
   <div>{{ piniaStoreA.piniaMsg }}</div>
</template>
<script setup>
  import {storeA} from '@/piniaStore/storeA'
  let piniaStoreA = storeA()
  console.log( piniaStoreA.piniaMsg );
  piniaStoreA.piniaMsg = 'helloworld'
  console.log( piniaStoreA.piniaMsg );
</script>

// 2.actions
import { storeA } from '@/piniaStore/storeA'
let piniaStoreA = storeA()
piniaStoreA.setName('daming')

// 3.批量修改属性
import { storeA } from '@/piniaStore/storeA'
let piniaStoreA = storeA()
console.log( piniaStoreA.name ); //xiaoyue
piniaStoreA.$patch({
  piniaMsg: 'hello juejin',
  name: 'daming'
})
console.log( piniaStoreA.name );//daming
 

Pinia 的优点：

1. 更加轻量级：相比 Vuex，Pinia 更加轻量级，因为它不需要使用 Vuex 的一些复杂的概念，如模块和 getter。
2. 更加简单易用：Pinia 的 API 设计更加简单易用，因为它使用了 Vue.js 3 的新特性，如 Composition API。
3. 更加灵活：Pinia 提供了更加灵活的状态管理方式，因为它支持多个 store 实例，而 Vuex 只支持一个 store 实例。

Pinia 的缺点：

1. 相对较新：Pinia 是一个相对较新的状态管理库，因此它可能存在一些未知的问题和限制。
2. 生态系统不够完善：由于 Pinia 是一个相对较新的库，它的生态系统可能不够完善，因此可能需要花费更多的时间来解决问题。

Redux和mobx

redux核心概念

React中redux的使用 - 掘金 (juejin.cn)

1.action

动作。一个js对象，包含两个属性：

• type： 标识属性，值是字符串。多个type用action分开
• payload：数据属性，可选。表示本次动作携带的数据

actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

特点：

• 只描述做什么
• JS 对象，必须带有 type 属性，用于区分动作的类型
• 根据功能的不同，可以携带额外的数据，配合该数据来完成相应功能

{ type: 'add1' } 
{ type: 'addN', payload:10 }

2.reducer

一个纯函数

作用

• 初始化状态

• 修改状态

  根据传入的旧状态和action，返回新状态

  公式：(previousState, action) => newState

const reducer = (state = 0, action) => {
  switch (action.type) {
  
  // 执行动作add  让state 加1
    case 'add':
      // 返回新的state
      return state + 1
    case 'addN':
      // 返回新的state
      return state + action.payload
    default:
      return state
  }
}

3.store

store：仓库，Redux 的核心，整合 action 和 reducer

特点：

• 一个应用只有一个 store

• 维护应用的状态，获取状态：store.getState()

• 创建 store 时接收 reducer 作为参数 ：const store = createStore(reducer)

• 发起状态更新时，需要分发 action：store.dispatch(action) 其他 API:这里一般使用react-redux 库代替):

• 订阅(监听)状态变化： const unSubscribe = store.subscribe(() => {})

• 取消订阅状态变化： unSubscribe()

随着项目功能变得越来越复杂，需要 Redux 管理的状态也会越来越多。导致reducer函数越来越重。这时需要按业务模块拆分，把大的reducer拆成小文件。

mobx

数据流管理方案：Redux 和 MobX 哪个更好？ - 掘金 (juejin.cn)

mobx与redux的区别，redux的配置比较复杂，mobx的缺点：所有的数据都要提取出来统一管理，有一些并不需要操作的数据也要提取出去，会比较麻烦。

Redux 是把要做的事情都交给了用户，来保证自己的纯净，那么 MobX 就是把最简易的操作给了用户，其它的交给 MobX 内部去实现。

Redux需要用户自己来根据它提供的api对订阅者进行发布，而mobx利用了 ES6 的 proxy 来追踪属性（旧版本是用 Object.defineProperty 来实现的）通过隐式订阅，自动追踪被监听的对象变化，进行数据的更新。