您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

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

51自学网 2022-02-21 13:35:26
  javascript

介绍

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.jsimport { 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()        // 
下载地址:
通过JavaScript实现动态圣诞树详解
JS日期控件My97DatePicker基本用法
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。