介绍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基本用法 |