VueX Redux Pinia区别归纳

VueX Redux Pinia区别归纳

VueX

概念相关：

• VueX是专门为Vue.js框架设计的状态管理库。
• VueX是由Vue官方进行维护的，因此对于Vue的支持极好。
• VueX的核心概念是“Store”，它是一个响应式的对象，用于存储全局状态（可以理解为项目全局变量）。
• 通过“mutations”来修改Store中的数据，并在需要的时候提交“mutations”，需要注意的是它只能封装同步逻辑。
• 通过“actions”来处理异步逻辑，并在需要的时候交给“mutations”来修改状态。
• 支持模块化Store，允许将多个状态进行拆分。

适用框架

VueX适用于Vue.js,但是Vue3版本中为了更好的配合组合式API我们使用了Pinia.

设计思想：

VueX借鉴了Flux框架，将应用状态存储在全局的“Store”中，通过“mutations”同步修改状态。

api及使用方法

// 创建Store
const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
});

// 组件中使用
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
  methods: {
    increment() {
      //通过commit调用mutation  
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    },
  },
};

Pinia

概念相关:

• Pinia是一个用于Vue.js的新一代状态管理库.
• 它是VueX的升级版,针对Vue3及其组合式API进行了优化.
• Pinia基于Vue的响应式系统,与Vue组件的结合更加的紧密.
• Pinia也是用了"Store"的概念,但是在使用和创建上相较于VueX更加的简单.
• VueX中的"mutations"和"actions"在Pinia中只保留了"mutations",取消了"actions",因为在Pinia中"mutations"允许异步逻辑的编写.

适用框架

Pinia主要是Vue3版本使用.

设计思想

也借鉴了Flux架构，但更加紧密地结合了Vue 3的Composition API，使得组件更好地管理状态逻辑。

api及使用方法

// 创建Store
import { defineStore } from 'pinia';

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

// 组件中使用
import { useCounterStore } from './store';

export default {
  setup() {
    const counter = useCounterStore();
      const incrementCount = ()=>{
          //直接调用counter身上的方法即可,也可以传递参数
          counter.increment()
      }
    return {
      count: counter.count,
      increment: counter.increment,
      decrement: counter.decrement,
    };
  },
};

Redux

概念相关

• Redux是一个独立于框架的状态管理库(简单理解就是谁想用都可以,只是React用的比较多).
• 它的设计灵感同样来源于Flux架构,但是对其进行了一些改进和优化.
• Redux的核心是一个全局的单一状态树----“Store”,通过"reducers"来进行状态修改,Reducers是一个纯函数(两大特点:1.纯净性,始终返回相同的输出;2.无副作用,不会进行其他的逻辑操作,主要用于return),负责根据"Actions"的类型来更新状态.
• 支持通过"middleware"处理异步逻辑,可以使用第三方中间件"react-thunk"或者"redux-saga".
• Redux提供了强大的开发者工具可以方便地调用和监控程序状态的变化.

适用框架

三大框架均可使用.

设计思想

设计灵感来自于Flux架构，但对Flux进行了一些改进和简化，核心思想是使用一个全局的状态树（Store）和纯函数的reducers来管理状态。

api及使用方法

// 创建Reducer
const initialState = { count: 0 };

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// 创建Store
import { createStore,applyMiddleware  } from 'redux';
// 引入异步操作
import thunk from 'redux-thunk';
const store = createStore(counterReducer,applyMiddleware(thunk));

// 组件中使用
import { useDispatch, useSelector } from 'react-redux';

const Counter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};