Vuex和Pinia的区别

一、介绍

1.1、Pinia

1. Pinia是 Vue.js 的轻量级状态管理库，它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。

1.2、Vuex

1. Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2. Vuex也是为Vue框架建立的一个流行的状态管理库，它也是Vue核心团队推荐的状态管理库。 Vuex高度关注应用程序的可扩展性、开发人员的工效和信心。它基于与redux相同的流量架构。

二、安装

2.1、安装Pinia

## 安装命令
yarn add pinia@next

npm install pinia@next

cnpm install vuex@next --save-

## 设置为全局对象，在main.js中引用
import { createPinia } from "pinia";
// 创建pinia实例
const pinia = createPinia()
app.use(pinia)

2.2、安装Vuex

## 安装命令
npm install vuex@next --save

yarn add vuex@next --save

cnpm install pinia@next

## 在根目录下引用
import {useStore} from './store'
// import store form './store'
// 创建store实例
const store = useStore()
app.use(store)

三、创建

3.1、创建Pinia

// store/index.ts
export default createPinia();

// store/others.ts
import { defineStore } from "pinia";
import Pinia from "./index";

export const otherStore = defineStore("other", {
  state: () => ({
    counter: 1,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
  actions: {
    increment() {
      this.counter++;
    },
  },
});

注：这是Pinia在Vue3+Ts项目的写法

3.2、安装Vuex

// store/index.js
import Vuex from 'vuex'
import serviceRules from './modules/serviceRules'
Vue.use(Vuex);
export default new Vuex.Store({
  modules: {
    serviceRules
  },
})

// store/modules/serviceRules.js
const state = {
  rulesData: {},
}

const mutations = {
  setRulesData (state, params) {
    /**
     * 新建 params => Object
     * 编辑 params => String
     */
    state.rulesData = {...params}
  },
}

const getters = {
  getRulesData (state) {
    return state.rulesData
  },
}

const actions = {
}

export default {
  state,
  getters,
  actions,
  mutations
}

注：这是Vuex在Vue2项目的写法，Vuex也可以在Vue3项目中书写，写法和Pinia相似，但是大多时候Vue3+Ts项目使用Pinia

四、使用

4.1、使用Vuex的两种方式

1.使用辅助函数

form:{
id:1;
name:"张三"
}

第一步：使用辅助函数mapMutations
第二步：然后直接this.setRulesData()
import { mapMutations, mapGetters } from "vuex";

methods:{
    ...mapMutations(["setRulesData"]);
}
this.setRulesData(form)

第二步：使用辅助函数mapGetters
第二步：然后直接this.getRulesData
computed:{
    ...mapGetters(["getRulesData"])
}
console.log(this.getRulesData)

 2.直接this.$store.state.rulesData

form:{
id:1;
name:"张三"
}


this.$store.dispatch("setRulesData",form)
this.$store.state.rulesData = form

4.2、使用Pinia的方式

import { otherStore } form "@store/other"

const other = otherStore();
other.increment()

总结：由此两个代码的对比我们可以看出使用Pinia更加的简洁，轻便。Pinia取消了原有的mutations，合并成了actions，且我们在取值的时候可以直接点到那个值，而不需要在.state，方法也是如此。

五、两者优缺点

5.1、Pinia的优点：

1. 完整的TypeScript支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript更容易

2. 极其轻巧(体积约 1KB)

3. store的action被调度为常规的函数调用，而不是使用dispatch方法或 MapAction 辅助函数，这在 Vuex 中很常见

4. 支持多个Store

5. 支持Vue devtools、SSR和 webpack 代码拆分

5.2、Pinia的缺点：

1. 不支持时间旅行和编辑等调试功能

5.3、Vuex的优点

1. 支持调试功能，如时间旅行和编辑

2. 适用于大型、高复杂度的Vue.js项目

5.4、Vuex的缺点

1. 从 Vue 3 开始，getter 的结果不会像计算属性那样缓存

2. Vuex 4有一些与类型安全相关的问题