vue3中vuex可以直接使用store.state.num进行修改赋值和读取,那么getter存在的意义是什么

时间: 2024-04-15 21:26:29 浏览: 143

vuex中store存储store.commit和store.dispatch的用法

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。`store.commit` 和 `store.dispatch` 是 Vuex 中用于管理和改变状态的核心方法，它们各自有不同的功能和应用场景。 **1. store.commit** `store.commit` 用于触发一个 **mutation**（状态变更事件）。Mutation 是 Vuex 中进行状态更改的唯一途径，必须是同步的。当你需要直接修改 Vuex store 中的状态时，就需要使用 `commit`。例如： ```javascript this.$store.commit('loginStatus', 1); ``` 上面的代码中，`loginStatus` 是 mutation 的类型，而 `1` 是传递给 mutation 的参数，也称为载荷（payload）。在 Vuex store 的配置中，你会定义对应的 mutation： ```javascript const mutations = { loginStatus(state, status) { state.loginStatus = status; } }; ``` 这里 `state` 对象代表 Vuex store 的状态，`status` 参数来自 `commit` 调用。 **2. store.dispatch** `store.dispatch` 用于触发一个 **action**。Action 可以包含任意异步操作。它们可以用来处理复杂的逻辑，比如与服务器的交互、多个 mutation 的组合等。例如： ```javascript this.$store.dispatch('isLogin', true); ``` 同样，你将在 Vuex store 中定义对应的 action： ```javascript const actions = { isLogin({ commit }, isLoggedIn) { if (isLoggedIn) { // 这里可以执行异步操作，如向服务器发送请求 // 假设我们有一个返回 Promise 的 API someApi.isLoggedIn().then((response) => { commit('setLoginStatus', response.status); }); } } }; ``` Action 接收一个上下文对象作为第一个参数，它包含了 `commit` 方法，因此可以在 action 内部调用 `commit` 来触发 mutation。 **3. 载荷（Payload）与对象风格提交** 无论是 `commit` 还是 `dispatch`，都可以接受载荷（payload）或对象风格的参数。在 `commit` 示例中，`amount` 就是载荷： ```javascript // 以载荷形式 store.commit('increment', { amount: 10 }); // 或者使用对象风格的提交方式 store.commit({ type: 'increment', amount: 10 }); ``` 对于 `dispatch`，对象风格的调用通常用于传递更复杂的数据结构，比如在 action 中需要的参数： ```javascript store.dispatch('fetchData', { url: '/api/data', params: { id: 1 } }); ``` **4. 获取 Action 的返回值** 由于 action 可以包含异步操作，因此你可能需要获取 action 的返回值。例如，在使用 axios 发起 HTTP 请求时，你可以通过 Promise 来处理： ```javascript this.$store.dispatch('getLunboList') .then((response) => { // 处理返回的数据 }) .catch((error) => { // 处理错误 }); ``` 在 action 中，你可以返回 Promise，确保其 resolve 或 reject 包含你想要传递的数据： ```javascript actions: { getLunboList({ commit }) { return new Promise((resolve, reject) => { axios.get('/api/lunboList').then((res) => { resolve(res.data); }).catch((err) => { reject(err); }); }); } } ``` Vuex 的 `store.commit` 和 `store.dispatch` 是状态管理的重要组成部分。`commit` 用于同步更新状态，`dispatch` 则用于处理异步操作并更新状态。理解这两者的区别和正确使用它们，能够帮助你构建更加可控和可维护的 Vue 应用。

在Vue 3中，Vuex的getter存在的意义是为了对store中的状态进行计算或筛选，并将计算结果或筛选后的数据返回给组件使用。 Getter可以被认为是store的计算属性，它接收state作为第一个参数，可以访问state中的数据，并可以接收其他getter作为第二个参数。Getter的返回值会根据其依赖的数据发生变化而进行缓存，只有当依赖的数据发生变化时，Getter才会重新计算。使用Getter可以实现多个组件共享相同的计算逻辑，避免在多个组件中重复编写相同的计算代码。Getter还可以帮助我们对数据进行筛选、过滤、排序等操作，使得组件只需要关注显示数据的逻辑，而不需要关注数据的具体处理过程。此外，Getter还可以在组件中通过mapGetters辅助函数进行映射，使得在组件中可以直接使用getter的结果，简化了组件的代码。总结来说，Getter在Vue 3中的存在意义是为了方便对store中的状态进行计算和筛选，并将结果返回给组件使用，同时也提高了代码的可维护性和复用性。

阅读全文

vue3中vuex可以直接使用store.state.num进行修改赋值和读取,那么getter存在的意义是什么

相关推荐

vue3中router和store详细使用教程方法vuex和route.zip

浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

vue2+vuex3+web3.js@^0.20.0

基于Vue2.0+Vuex+Axios+Node.js+Express+MySQL实现京东移动web商城.zip

无限级树递归组件，默认数据源Vue$store.state，用于 vue 项目 vuex state 数据

VueadminTemplate:使用 Vue.js、Vuex 和 Vuesax 的 Vue.js 管理仪表板

vue-vuex-router-master.zip

vuex-local-state-将'localState / sessionState'选项添加到vuex。 使用localStorage保持Vuex状态。-Vue.js开发

vue-vuex, Vue & Vuex & Express Hot-Reload.zip

vuex对store进行抽离.zip

在vue中使用vuex,修改state的值示例

vue-socket.io扩展-Vue.js和Vuex的Socket.io绑定-Vue.js开发

使用Vue2.0+vue-router+vuex写的知乎.zip

使用 Vue、Vuex 编写俄罗斯方块 使用 Vue、Vuex 做俄罗斯方块.zip

vue-shopping-cart:使用Vue，Vuex，BootstrapVue和animate.css的购物车应用程序演示

Aspnet-aspnet-core-vue-vuex-playground-template.zip

可是直接给store.state.num也可以完成响应式啊

最新推荐

浅谈vuex为什么不建议在action中修改state

Vuex之理解Store的用法

vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

解决vue项目中某一页面不想引用公共组件app.vue的问题

在vue.js中使用JSZip实现在前端解压文件的方法

Angular实现MarcHayek简历展示应用教程

管理建模和仿真的文件

深入剖析：内存溢出背后的原因、预防及应急策略（专家版）

Java中如何对年月日时分秒的日期字符串作如下处理：如何日期分钟介于两个相连的半点之间，就将分钟数调整为前半点

Crossbow Spot最新更新 - 获取Chrome扩展新闻

vuex-local-state-将'localState / sessionState'选项添加到vuex。使用localStorage保持Vuex状态。-Vue.js开发

使用 Vue、Vuex 编写俄罗斯方块使用 Vue、Vuex 做俄罗斯方块.zip