欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

vue3中vuex与pinia的踩坑笔记记录

时间:2023-02-08 08:43:32|栏目:vue|点击:

介绍

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

Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性、存储模块组织、状态变化分组、多存储创建等)。

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

安装使用

安装 vuex

npm install vuex@next --save

cnpm install vuex@next --save-

yarn add vuex@next --save

安装 pinia

npm install pinia@next

cnpm install pinia@next

yarn add pinia@next

装完直接根据下面的写法来用就行了,只要你会用 vuex,你就等于你会用 pinia 的基本用法了,这边不展示 pinia 的插件写法

简单对比写法差异与共同点

vuex 和 pinia 是同团队成员编写,但是 pinia 写法上更加人性化,也更简单

vuex在vue3中的写法和用法

// store.js
import { createStore } from 'vuex'

export default createStore({
    // 定义数据
    state: { a:1 },
    // 定义方法
    mutations: {
        xxx(state,number){
            state.a = number
        }
    },
    // 异步方法
    actions: { },
    // 获取数据
    getters: { getA:state=>return state.a }
})

// 在vue3中使用
<template>
    <div>
        {{number}}
        <button @click="clickHandle">按钮</button>
    </div>
</template>
<script>
import {useStore} from "vuex"
export default {
    setup(){
        let store = useStore()
        // ??? 如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化,或者使用getter,就可以不使用computed
        let number = computed(()=>store.state.a)
        const clickHandle = () => {
            store.commit("xxx","100")
        }
        return{number,clickHandle}
    }
}
<script>

pinia在vue3中的写法和用法

// store.js
import { defineStore } from 'pinia'

// defineStore 调用后返回一个函数,调用该函数获得 Store 实体
export const GlobalStore = defineStore({
  // id: 必须的,在所有 Store 中唯一
  id: "myGlobalState",
  // state: 返回对象的函数
  state: () => ({
    a: 1,
  }),
  getters: {},
  actions: {
    setXXX(number) {
      this.a = number;
    },
  },
});

// 在vue3中使用
<template>
    <div>
        {{number}}
        <button @click="clickHandle">按钮</button>
    </div>
</template>
<script>
import {GlobalStore} from "@/store/store.js"
export default {
    setup(){
        let store = GlobalStore();
        // ??? 如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化,或者使用getter,就可以不使用computed (这边和vuex是一样的)
        let number = computed(()=>store.a)
        const clickHandle = () => {
            store.setXXX("100")
        }
        return{number,clickHandle}
    }
}
<script>

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

Vuex 和 Pinia 的优缺点

Vuex的优点

  • 支持调试功能,如时间旅行和编辑
  • 适用于大型、高复杂度的Vue.js项目

Vuex的缺点

  • 从 Vue 3 开始,getter 的结果不会像计算属性那样缓存
  • Vuex 4有一些与类型安全相关的问题

Pinia的优点

  • 完整的 TypeScript 支持:与在 Vuex 中添加 TypeScript 相比,添加 TypeScript 更容易
  • 极其轻巧(体积约 1KB)
  • store 的 action 被调度为常规的函数调用,而不是使用 dispatch 方法或 MapAction 辅助函数,这在 Vuex 中很常见
  • 支持多个Store
  • 支持 Vue devtools、SSR 和 webpack 代码拆分

Pinia的缺点

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

何时使用Pinia,何时使用Vuex

根据我的个人经验,由于Pinea是轻量级的,体积很小,它适合于中小型应用。它也适用于低复杂度的Vue.js项目,因为一些调试功能,如时间旅行和编辑仍然不被支持。

将 Vuex 用于中小型 Vue.js 项目是过度的,因为它重量级的,对性能降低有很大影响。因此,Vuex 适用于大规模、高复杂度的 Vue.js 项目。

总结

上一篇:使用Mockjs模拟接口实现增删改查、分页及多条件查询

栏    目:vue

下一篇:vue路由跳转router-link清除历史记录的三种方式(总结)

本文标题:vue3中vuex与pinia的踩坑笔记记录

本文地址:http://www.codeinn.net/misctech/225359.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有