景区网站建设教程,外贸网站建站多少钱,wordpress蚂蚁主题,广州系统软件app开发公司VueX 简介
Vue官方#xff1a;状态管理工具
状态管理是什么
需要在多个组件中共享的状态、且是响应式的、一个变#xff0c;全都改变。
例如一些全局要用的的状态信息#xff1a;用户登录状态、用户名称、地理位置信息、购物车中商品、等等
这时候我们就需要这么一个工…VueX 简介
Vue官方状态管理工具
状态管理是什么
需要在多个组件中共享的状态、且是响应式的、一个变全都改变。
例如一些全局要用的的状态信息用户登录状态、用户名称、地理位置信息、购物车中商品、等等
这时候我们就需要这么一个工具来进行全局的状态管理Vuex就是这样的一个工具。
单页面的状态管理
View–Actions—State 视图层(view)触发操作(action)更改状态(state)响应回视图层(view) 多页状态管理 vuex store对象属性介绍
vue3 中的 setup 在 beforecreate 和 created 前执行此时 vue对象还未被创建没有了之前的this所以此处我们需要用到另一种方法来获取到 store 对象。
import { useStore } from vuex // 引入useStore 方法
const store useStore() // 该方法用于返回store 实例
console.log(store) // store 实例对象1. state
存放数据的地方
state: { count: 100, num: 10 }, 可以在 state 中直接进行数据变化的操作但Vue不建议这么做。因为对于vue开发工具 devtools 来说直接在state中进行数据改变devtools是跟踪不到的。vuex中希望通过 action进行异步操作或是 mutations同步操作来进行数据改变的操作这样在 devtools 中才能直接观察出数据的变化以及记录方便开发者调试。 另外在vue3 中对state 中对象新增属性或删除时不再需要通过 vue.set() , 或是 vue.delete() 来进行对象的响应式处理了直接新增的对象属性已经具有响应式
2. mutations
vuex的store状态更新的唯一方式提交 mutation
同步操作可以直接在mutatuions中直接进行
mutions 主要包含2部分: 字符串的事件类型 (type) 一个**回调函数handler**该回调函数的第一个参数是 state mutations: { // 传入 state increment (state) { state.count } }
template 中通过 $store.commit(方法名) 触发
// 导入 useStore 函数
import { useStore } from vuex
const store useStore()
store.commit(increment)
mution 的参数与传参方法
mution 接收参数直接写在定义的方法里边即可接受传递的参数
// ...state定义count
mutations: {sum (state, num) {state.count num}
}通过 commit 的payload 进行参数传递
使用 store.commit(mution中函数名, 需要传递的参数 ) 在commit里添加参数的方式进行传递
h2{{this.$store.state.count}}/h2
button clickadd(10)/button
...
script setup
// 获取store实例获取方式看上边获取store实例方法
const add (num) {store.commit(sum, num)
}
/scriptmution 的提交风格
前面提到了 mution 主要包含 type 和 回调函数 两部分, 和通过commit payload的方式进行参数传递提交,下面我们可以
用这种方式进行 mution 的提交
const add (num) {store.commit({type: sum, // 类型就是mution中定义的方法名称num})
}...
mutations: {sum (state, payload) {state.count payload.num}
}3. actions
异步操作在action中进行再传递到mutation
action基本使用如下
action 中定义的方法默认参数为** context 上下文** 可以理解为 store 对象
通过 context 上下文对象拿到store通过 commit 触发 mution 中的方法以此来完成异步操作
...
mutations: {sum (state, num) {state.count num}
},
actions: {// context 上下文对象可以理解为storesum_actions (context, num) {setTimeout(() {context.commit(sum, num) // 通过context去触发mutions中的sum}, 1000)}
},在template 中通过dispatch 调用action 中定义的sum_action 方法
// ...template
store.dispatch(sum_actions, num)通过 promise 实现异步操作完成通知组件异步执行成功或是失败。
// ...
const addAction (num) {store.dispatch(sum_actions, {num}).then((res) {console.log(res)}).catch((err) {console.log(err)})
}sun_action方法返回一个promise当累加的值大于30时不再累加抛出错误。 actions: {sum_actions (context, payload) {return new Promise((resolve, reject) {setTimeout(() {// 通过 context 上下文对象拿到 countif (context.state.count 30) {context.commit(sum, payload.num)resolve(异步操作执行成功)} else {reject(new Error(异步操作执行错误))}}, 1000)})}},4. getters
类似于组件的计算属性
import { createStore } from vuexexport default createStore({state: {students: [{ name: mjy, age: 18}, { name: cjy, age: 22}, { name: ajy, age: 21}]},getters: {more20stu (state) { return state.students.filter(item item.age 20)}}
})使用 通过$store.getters.方法名 进行调用
//...template
h2{{$store.getters.more20stu}}/h2 // 展示出小于20岁的学生getters 的入参, getters 可以接收两个参数一个是 state, 一个是自身的 getters 并对自身存在的方法进行调用。
getters: {more20stu (state, getters) { return getters.more20stu.length}
}getters 的参数与传参方法
上面是getters固定的两个参数如果你想给getters传递参数让其筛选大于 age 的人可以这么做
返回一个 function 该 function 接受 Age并处理
getters: {more20stu (state, getters) { return getters.more20stu.length},moreAgestu (state) {return function (Age) {return state.students.filter(item item.age Age)}}// 该写法与上边写法相同但更简洁用到了ES6中的箭头函数如想了解es6箭头函数的写法// 可以看这篇文章 https://blog.csdn.net/qq_45934504/article/details/123405813?spm1001.2014.3001.5501moreAgestu_Es6: state {return Age {return state.students.filter(item item.age Age)}}
}使用
//...template
h2{{$store.getters.more20stu}}/h2 // 展示出小于20岁的学生
h2{{$store.getters.moreAgestu(18)}}/h2 // 通过参数传递, 展示出年龄小于18的学生5. modules
当应用变得复杂时state中管理的变量变多store对象就有可能变得相当臃肿。
为了解决这个问题vuex允许我们将store分割成模块化modules而每个模块拥有着自己的state、mutation、action、getters等
在store文件中新建modules文件夹
在modules中可以创建单一的模块一个模块处理一个模块的功能
store/modules/user.js 处理用户相关功能
store/modules/pay.js 处理支付相关功能
store/modules/cat.js 处理购物车相关功能
// user.js模块
// 导出
export default {namespaced: true, // 为每个模块添加一个前缀名保证模块命明不冲突 state: () {},mutations: {},actions: {}
}最终通过 store/index.js 中进行引入
// store/index.js
import { createStore } from vuex
import user from ./modules/user.js
import user from ./modules/pay.js
import user from ./modules/cat.js
export default createStore({modules: {user,pay,cat}
})在template中模块中的写法和无模块的写法大同小异带上模块的名称即可
h2{{$store.state.user.count}}/h2store.commit(user/sum, num) // 参数带上模块名称
store.dispatch(user/sum_actions, sum)一、使用vuex
vuex的安装 npm i vuex vuex的配置/store/index.js
import {createStore} from vuex//导入createStore构造函数
export default createStore({ state:{ //Vuex的状态实际上就是存数据的地方person:{name:jack,age:200}},getters:{ //提供获取Vux状态的方式, 注意在组件中调用时getPerson是以属性的方式被访问getPerson(state){return state.person}},mutations:{ //提供直接操作Vuex的方法注意mutations里的方法中不能有任何异步操做ageGrow(state, value){//第一个参数state为Vuex状态第二个参数为commit函数传来的值state.person.age value}},actions:{ //提供通过mutations方法来简介操作Vuex的方法ageGrow(context, value){ //第一个参数context为上下文提供一些方法第二个参数为dispatch函数传来的值context.commit(ageGrow, value)}},
})在/main.js中引入
import { createApp } from vue
import App from ./App.vue
import store from ./store
const app createApp(App)
app.use(store)
app.mount(#app)在组件中使用Vuex:
templateh1名字{{person.name}}--年龄{{person.age}}/h1input typetext v-modelvaluebutton clickageGrow(value)增加年龄/button!-- 在input框输入一个数字点击按钮可以看到年龄发生变化说明Vuex正常工作 --
/templatescriptimport {useStore} from vuex import {ref} from vueexport default {setup(){const store useStore() //获取store对象let person store.getters.getPerson //从组件中获取状态(数据)person 方式一// let person store.state.person //从组件中获取状态(数据)person 方式二let value ref(输入年龄的增量)function ageGrow(ageGrowth){ageGrowth parseInt(ageGrowth)if(isNaN(ageGrowth)){ageGrowth 0}store.dispatch(ageGrow, ageGrowth)//通过dispatch来调用actions里的ageGrow方法参数为ageGrowth//actions的方法又会通过commit来调用mutations里的方法从而引起状态(数据)的变化//也可以在组件里跳过dispatch actions直接store.commit}return {person, value,ageGrow}}}
/script
style/style小结安装完vuex之后首先要用creatRouter构造函数创建一个router对象并在main.js中引入这个对象。然后在组件中通过userStore方法来获取这个router对象进一步通过getter或者state可以得到Vuex状态(数据)通过dispatch-actions-mutations-state的数据传送方式可以操作和改变Vuex的状态(数据)
2. Module Vuex官方原话“由于使用单一状态树应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时store 对象就有可能变得相当臃肿。” 什么叫单一状态树呢其实就是上文中的state对象。在Vuex的基本使用中我们使用state对象来存储Vuex的状态state对象里面可以嵌套其他的对象它是一个树形的结构而且这个state对象是唯一的所有的状态都要存储在这一个对象里。因此我们称之为单一状态树。 这种单一状态树的弊端是显而易见的对于中大型项目来说要托管给Vuex的状态有很多把这些海量的数据如果都塞到一个文件里面的一个对象里面未免显得过于臃肿不管是开发起来还是维护起来都会有很多不变。 对此官方给出了解决方案 “为了解决以上问题Vuex 允许我们将 store 分割成模块module 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割” 2.1 vuex中模块化的基本使用
vuex的模块化没什么难理解的就是把store给拆开一个对象拆成多个对象一个文件拆成多个文件并且彼此可以拥有独立的命名空间。 道理很简单所以直接看样例
文件结构
├──src├── components│ └── Test.vue└── store├── index.js└── modules├── male.js└── female.jsindex.js
import {createStore} from vuex
import female from ./modules/female //导入模块
import male from ./modules/male //导入模块
export default createStore({ modules:{ //使用模块female,male}
})male.js
export default {namespaced:true, //namespaced:true代表该模块带有独立命名空间state:{ //否则默认是处于全局命名空间就和非模块化一样personList:[{name:张飞, id:004},{name:武则天, id:005},{name:秀吉, id:006},]},mutations:{addMutation(state, value){ //往personList中添加一个人state.personList.push(value)},removeMutaion(state, value){ //往personList中删除一个人state.personList state.personList.filter((el) el.id ! value.id)}},actions:{addAction(context, value){setTimeout(() {context.commit(addMutation, value) // -male/addMutation}, 1000);},removeAction(context, value){context.commit(removeMutaion, value)}},getters:{personList(state){return state.personList}}
}female.js
export default {namespaced:true, //namespaced:true代表该模块带有独立命名空间state:{ //否则默认是处于全局命名空间就和非模块化一样personList:[{name:李白, id:001},{name:孙尚香, id:002},{name:大乔, id:003},]},mutations:{addMutation(state, value){ //往personList中添加一个人state.personList.push(value)},removeMutaion(state, value){ //往personList中删除一个人state.personList state.personList.filter((el) el.id ! value.id)}},actions:{addAction(context, value){setTimeout(() {context.commit(addMutation, value) // -female/addMutation}, 1000);},removeAction(context, value){context.commit(removeMutaion, value)}},getters:{personList(state){return state.personList}}
}Test.vue
templateh1女人/h1li v-forfemalePerson in femalePersons :keyfemalePerson.id{{femalePerson.name}}button clickaddToMale(femalePerson)添加到男人/button/lih1男人/h1li v-formalePerson in malePersons :keymalePerson.id{{malePerson.name}}button clickaddToFemale(malePerson)添加到女人/button/li!-- 有两个列表分布是男人和女人通过点击按钮可以把列表中的某些项添加到另一个列表中 --!-- 建议粘贴复制并运行代码这样更直观 --
/templatescriptimport { computed } from vue/runtime-core;import {useStore} from vuexexport default {setup(){let store useStore()let malePersons computed(() store.getters[male/personList]) //通过getter获取statelet femalePersons computed(() store.state.female.personList) //直接获取statefunction addToMale(person){store.dispatch(male/addAction, person)store.dispatch(female/removeAction, person)//如果模块中namespaced true那么要在方法名前面添加模块的逻辑路径//index.js里使用的模块为路径的起点。//比如index里面有一个moduleAmoduleA有一个子模块moduleBmodule有一个action是actionx//那么调用方式为 store.dispatch(moduleA/moduleB/actionx, value)}function addToFemale(person){store.dispatch(female/addAction, person)store.dispatch(male/removeAction, person)}return {malePersons,femalePersons,addToMale,addToFemale}}}
/script
style/style2.2 在命名空间中访问全局内容
什么是全局内容不在同一个模块中的内容就是全局内容。 比如对于上文中的female模块来说male模块中的getters state action mutations就是全局内容接下来将会讲解如何在一个模块中访问到全局内容。 为了便于理解我创造了一个新的样例
├──src├── components│ └── Test.vue└── store├── index.js└── modules├── moduleA.js└── moduleB.jsindex是所有的模块的根moduleA和moduleB是两个子模块接下来要做的事情就是在index.js、moduleA.js、moduleB.js中写一些getters state action mutations最终达成的效果是在index中访问moduleA的内容在moduleA中访问moduleB的内容在moduleB中访问index的内容。 Test.vue:
templateli {{rootModule.name}}---{{rootModule.num}} button clickrootClickrootAction---A/button /lili {{moduleA.name}}---{{moduleA.num}} button clickaClickmoduleAction---B/button /lili {{moduleB.name}}---{{moduleB.num}} button clickbClickmoduleAction---root/button /li!-- 点击rootmoduleA数字加一点击moduleAmoduleB数字加一点击moduleBroot数字加一 --button clickstore.dispatch(globalAction)触发全局action/button
/templatescriptimport {useStore} from vuexexport default {setup(){let store useStore()console.log(store.getters);let rootModule store.getters[moduleB/rootStateThroughModuleB].info //通过moduleB的getters获得root的状态let moduleA store.getters[moduleAStateThroughRoot].info //通过root的getters获得moduleA的状态let moduleB store.getters[moduleA/moduleBStateThroughModuleA].info //通过moduleA的getters获得moduleB的状态// let moduleB store.state.moduleB.info// let moduleA store.state.moduleA.info// let rootModule store.state.infofunction rootClick(){store.dispatch(addAction, 1)} //调用root中的action改变的是moduleA的状态function aClick(){store.dispatch(moduleA/addAction, 1)}//调用moduleA中的action改变的是moduleB的状态function bClick(){store.dispatch(moduleB/addAction, 1)}//调用moduleB中的action改变的是root的状态return {rootModule,moduleA,moduleB,rootClick,aClick,bClick,store}}}
/script
style/style3. vuex的typescript用法
vuex的typescript用法其实就是把state加上ts里的类型限制
3.1 不使用模块化
store文件
// store.ts
import { InjectionKey } from vue
import { createStore, Store } from vuex// 为 store state 声明类型
export interface State {count: number
}// 定义 injection key
export const key: InjectionKeyStoreState Symbol()export const store createStoreState({state: {count: 0}
})在main.ts里引入
// main.ts
import { createApp } from vue
import { store, key } from ./storeconst app createApp({ ... })// 传入 injection key
app.use(store, key)app.mount(#app)在组件中使用useStore()获取store将上述 injection key 传入 useStore 方法可以获取类型化的 store。
// vue 组件
import { useStore } from vuex
import { key } from ./storeexport default {setup () {const store useStore(key)store.state.count // 类型为 number}
}在每个组件中都导入key有些重复且麻烦我们可以将useStore()封装成myUseStore()
// 在store.ts增加下面几行
import { useStore } from vuex
export function myUseStore () {return useStore(key)
}3.2 使用模块化
store/index.ts
import { createStore, Store } from vuex
import moduleA from ./modules/moduleA
import moduleB from ./modules/moduleB
import { InjectionKey } from vue//模块A state的类型
interface moduleAState {name:string,age:number
}//模块B state的类型
interface moduleBState {id:string,adult:boolean
}//vuex state类型
interface State{moduleA:moduleAState,moduleB:moduleBState
}//如果使用模块化的话在createStore参数里面就不要写state了否则会报错
export const key: InjectionKeyStoreState Symbol()
export const store createStoreState({// state:{}, //不可以加这一行否则报错modules: {moduleA,moduleB}
})在组件中访问
// vue 组件
import { useStore } from vuex
import { key } from ./storeexport default {setup () {const store useStore(key)store.state.moduleA// 类型为 moduleAStatestore.state.moduleB// 类型为 moduleBState}
}Pinia 简介 Pinia是vue生态里Vuex的替代者一个全新的vue状态管理库。在Vue3成为正式版以后尤雨溪强势推荐的项目就是Pinia。 那先来看看Pinia比Vuex好的地方也就是Pinia的五大优势。 可以对Vue2和Vue3做到很好的支持也就是老项目也可以使用Pinia。 抛弃了Mutations的操作只有state、getters和actions.极大的简化了状态管理库的使用让代码编写更加容易直观。 不需要嵌套模块符合Vue3的Composition api 让代码更加扁平化。 完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的化一定知道Vuex对TS的语法支持不是完整的经常被吐槽。 代码更加简洁可以实现很好的代码自动分割。Vue2的时代写代码需要来回翻滚屏幕屏幕找变量非常的麻烦Vue3的Composition api完美了解决这个问题。 可以实现代码自动分割pinia也同样继承了这个优点。 安装和配置Pinia
安装和配置Pinia非常简单像其他Vue插件一样Pinia需要通过yarn或npm进行安装并且与Vue应用程序进行绑定可以使用以下命令进行安装 yarn add pinia # 或者使用 npm npm install pinia 在安装完Pinia包之后需要在main.ts文件中导入createPinia函数并将Pinia插件与Vue应用程序绑定如下所示
import { createApp } from vue;
import { createPinia } from pinia;
import App from ./App.vue;const app createApp(App);const pinia createPinia();
app.use(pinia);app.mount(#app);使用 createPinia() 函数创建并初始化Pinia插件实例将其与Vue应用程序绑定使用app.use(pinia)。至此我们就可以使用Pinia来管理Vue应用程序的状态了。
Pinia的核心
Store
Store是 Pinia 中管理状态的核心概念。它相当于一个 Vue 组件中的状态但是 Store是一个独立的模块。
Store 是用 defineStore() 定义的它的第一个参数要求是一个独一无二的名字这个名字 也被用作 id 是必须传入的 Pinia 将用它来连接 store 和 devtools。为了养成习惯性的用法将返回的函数命名为 use… 是一个符合组合式函数风格的约定。
defineStore() 的第二个参数可接受两类值Setup 函数或 Option 对象。 定义Store的示例代码
import { defineStore } from pinia// 你可以对 defineStore() 的返回值进行任意命名但最好使用 store 的名字
同时以 use 开头且以 Store 结尾。
(比如 useUserStoreuseCartStoreuseProductStore)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore defineStore(alerts, {// 其他配置...
})defineStore( ) 方法的第一个参数相当于为容器起一个名字。注意这里的名字必须唯一不能重复。defineStore( ) 方法的第二个参数可以简单理解为一个配置对象里边是对容器仓库的配置说明。当然这种说明是以对象的形式。state 属性 用来存储全局的状态的这里边定义的就可以是为SPA里全局的状态了。getters属性 用来监视或者说是计算状态的变化的有缓存的功能。actions属性 对state里数据变化的业务逻辑需求不同编写逻辑不同。说白了就是修改state全局状态数据的。 State
State 是 store 中存储数据的地方。通过定义 State可以在 store 的任何位置访问和修改数据。
在 Pinia 中state 被定义为一个返回初始状态的函数。这使得 Pinia 可以同时支持服务端和客户端。 定义State的示例代码如下
import { defineStore } from piniaconst useStore defineStore(storeId, {// 为了完整类型推理推荐使用箭头函数state: () {return {// 所有这些属性都将自动推断出它们的类型count: 0,name: Eduardo,isAdmin: true,items: [],hasChanged: true,}},
})Getter
Getter 用来获取从 state 派生的数据类似于 Vue 组件中的 computed 计算属性。可以通过 defineStore() 中的 getters 属性来定义它们。推荐使用箭头函数并且它将接收 state 作为第一个参数
export const useStore defineStore(main, {state: () ({count: 0,}),getters: {doubleCount: (state) state.count * 2,},
})Action Action 相当于组件中的 方法。它们可以通过 defineStore() 中的 actions 属性来定义Action 是一种将异步操作封装在 store中的方式它是一个可以被调用的函数也可以接收参数并修改 store 中的状态。 Action应该始终是同步的并返回一个 Promise 对象以便在处理异步操作时能够很好地处理结果。
Pinia 中的 Action 由 defineStore 创建可以通过在 actions 中定义它们来使用它们。例如下面是一个 store 中的 Action 定义
import { defineStore } from piniaexport const myStore defineStore(myStore,{ state: () ({message: Hello,}),actions: {async fetchMessage() {const response await fetch(http://127.0.0.1:5173/message)const data await response.json()this.message data.message},},
})在上面的示例中我们为 myStore 定义了一个 Action fetchMessage() 它会从后台 API 中获取数据并更新 store 中的状态。然后我们可以从组件或其他 Action 中调用该 Action
import { useStore } from piniaexport default {setup() {const store useStore(myStore)function handleClick() {store.fetchMessage()}return {handleClick,}},
}创建和使用Pinia
创建Pinia
前面我们已经安装和配置好了Pinia,在创建Pinia之前为了代码的统一管理和可维护性我们依然先创建一个store文件夹然后在来创建相关的Pinia具体步骤如下
在src文件夹下新建store文件夹后面所有涉及需要Pinia进行状态管理的代码都放在该文件夹下在store文件夹下新建movieListStore.js文件创建完成后打开该文件在movieListStore.js文件中引入Pinia中的defineStore 方法
import { defineStore } from pinia创建defineStore 对象定义一个useMovieListStore用于接收defineStore创建的对象并将其通过export default 导出 const useMovieListStore defineStore(movie,{ state: () ({isShow: true,movies: [],}),getters: {getIsShow() {return this.isShow},getMovies() {return this.movies},},actions: {setIsShow(value) {this.isShow value},async fetchMovies() {const response await fetch(https://api.movies.com/movies)const data await response.json()this.movies data},},
})
export default useMovieListStore 注意 这里需要注意官方建议我们在定义钩子函数时建议使用use开头Store结尾的命名方式来对上面创建的对象进行命名如上面的useMovieListStore
使用Pinia
前面我们已经创建好了Pinia接下来我们就可以在组件中使用了。 在Vue组件中使用store我们需要通过 useStore() 函数访问store的实例。 在Vue组件中使用Pinia的步骤如下
1 先使用 import 引入Pinia 中的 useStore
import { useStore } from pinia2 创建useStore对象
const store useStore(movie)在需要获取状态的地方通过上面定义的store.getIsShow()获取状态
return {isShow: store.getIsShow(),
}Menu.vue中完整的示例代码如下
templatenavulli v-showisShow{{ $route.name }} /lilirouter-link to/Home/router-link/lilirouter-link to/moviesMovies/router-link/li/ul/nav
/templatescript
import { defineComponent } from vue
import { useStore } from piniaexport default defineComponent({name: Menu,setup() {const store useStore(movie)return {isShow: store.getIsShow(),}},
})
/scriptPinia的Setup Store方式定义 Store Setup Store与Option Store稍有不同它与 Vue 组合式 API 的 setup 函数 相似我们通过传入一个函数该函数定义了一些响应式属性和方法并且返回一个带有我们想暴露出去的属性和方法的对象。示例代码如下
export const useCounterStore defineStore(counter, () {const count ref(0)function increment() {count.value}return { count, increment }
})在 Setup Store 中
ref() 就是 state 属性computed() 就是 gettersfunction() 就是 actions pinia在API里的使用 1.$reset 重置到初始值
这个 $reset 可以将 state 的数据初始到初始值比如我们有一个数据点击按钮改变了然后我们可以通过这个 API 将数据恢复到初始状态值。 2.$subscribe监听 state 数据变化
$subscribe 使用来监听的监听 state 数据的变化只要 state 里面的数据发生了变化就会自动走这个函数。 3.$onAction一调用 actions 就触发
这个看名字就很好理解了吧就是 action 一调用就会被触发。
它里面只有一个参数 args。写一下关键代码吧。 Pinia 与 VueX的区别与优缺点 pinia和vuex的区别 1pinia它没有mutation,他只有stategettersaction【同步、异步】使用他来修改state数据 2pinia他默认也是存入内存中如果需要使用本地存储在配置上比vuex麻烦一点 3pinia语法上比vuex更容易理解和使用灵活。 4pinia没有modules配置没一个独立的仓库都是definStore生成出来的 5pinia state是一个对象返回一个对象和组件的data是一样的语法
Vuex 和 Pinia 的优缺点 Pinia的优点
完整的 TypeScript 支持与在 Vuex 中添加 TypeScript 相比添加 TypeScript 更容易 极其轻巧(体积约 1KB) store 的 action 被调度为常规的函数调用而不是使用 dispatch 方法或 MapAction 辅助函数这在 Vuex 中很常见 支持多个Store 支持 Vue devtools、SSR 和 webpack 代码拆分 Pinia的缺点
不支持时间旅行和编辑等调试功能 Vuex的优点
支持调试功能如时间旅行和编辑适用于大型、高复杂度的Vue.js项目
Vuex的缺点
从 Vue 3 开始getter 的结果不会像计算属性那样缓存Vuex 4有一些与类型安全相关的问题 何时使用Pinia何时使用Vuex 个人感觉由于Pinea是轻量级的体积很小它适合于中小型应用。它也适用于低复杂度的Vue.js项目因为一些调试功能如时间旅行和编辑仍然不被支持。 将 Vuex 用于中小型 Vue.js 项目是过度的因为它重量级的对性能降低有很大影响。因此Vuex 适用于大规模、高复杂度的 Vue.js 项目。 Vue3使用Vuex_vue3 vuex官网_BigJF的博客-CSDN博客
Vue3中Vuex的使用_vue3中使用vuex_普通网友的博客-CSDN博客
Vue3之Vuex_vue3的vuex_开longlong了吗的博客-CSDN博客
Vue3中使用Pinia详解_九仞山的博客-CSDN博客
pinia和vuex的区别 Vuex 和 Pinia 的优缺点 何时使用Pinia何时使用Vuex_pinia和vuex区别_more名奇妙的博客-CSDN博客
