在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
介绍Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎。它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。 Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性、存储模块组织、状态变化分组、多存储创建等)。 另一方面,Vuex也是为Vue框架建立的一个流行的状态管理库,它也是Vue核心团队推荐的状态管理库。Vuex高度关注应用程序的可扩展性、开发人员的工效和信心。它基于与Redux相同的流量架构。 安装使用安装 vuex
安装 pinia
装完直接根据下面的写法来用就行了,只要你会用 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的优点
Vuex的缺点
Pinia的优点
Pinia的缺点
何时使用Pinia,何时使用Vuex根据我的个人经验,由于Pinea是轻量级的,体积很小,它适合于中小型应用。它也适用于低复杂度的Vue.js项目,因为一些调试功能,如时间旅行和编辑仍然不被支持。 将 Vuex 用于中小型 Vue.js 项目是过度的,因为它重量级的,对性能降低有很大影响。因此,Vuex 适用于大规模、高复杂度的 Vue.js 项目。 总结到此这篇关于vue3中vuex与pinia踩坑的文章就介绍到这了,更多相关vue3 vuex与pinia踩坑内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界! |
请发表评论