![](https://img-blog.csdnimg.cn/6feca2c20e8a4ebda85672060d24a035.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
文章平均质量分 57
以Vue内容为主包括项目构建、路由、缓存等
mumuwei_l
这个作者很懒,什么都没留下…
展开
-
【Vuex入门】——(七)Module
一、Module引入 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割: const moduleA = { state: () => ({ ... }), mutations: { ... }, actions:原创 2022-03-22 15:43:41 · 221 阅读 · 0 评论 -
【Vuex入门】——(六)Getter
一、引入Getter 有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数: computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } } 如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。 Vuex 允许我们在 store 中定义 gett原创 2022-03-22 15:09:13 · 157 阅读 · 0 评论 -
【Vuex入门】——(五)Action
在 mutation 中混合异步调用会导致你的程序很难调试。例如,当你调用了两个包含异步回调的 mutation 来改变状态,你怎么知道什么时候回调和哪个先回调呢?这就是为什么我们要区分这两个概念。在 Vuex 中,mutation 都是同步事务: store.commit('add') // 任何由 "add" 导致的状态变更都应该在此刻完成。 因此,Action 就出现了。 一、什么是 Action Action 类似于 mutation ,不同在于: Action 提交的是 mutation,而原创 2022-03-22 14:56:16 · 453 阅读 · 0 评论 -
【Vuex入门】——(四)Mutation
一、Mutation的作用 更改 Vuex 的store 中的状态的唯一方法是提交 mutation。 Vuex 中的 mutation 非常类似于事件: 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。 这个回调函数就是我们实际进行状态更改的函数,并且它会接受 state 作为第一个参数: const store = new Vuex.Store({ state: { count: 1 }, mutations:原创 2022-03-22 14:29:52 · 1703 阅读 · 0 评论 -
【Vuex入门】——(三)State
Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态。 这也意味着,每个应用将仅仅包含一个 store 实例。 单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。 一、在 Vue 组件中使用 Vuex Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)): // 根组件 const app = new Vue({ el: '#app', // 把 store 对象提供原创 2022-03-22 13:47:07 · 169 阅读 · 0 评论 -
【Vuex入门】——(二)最简单的 Store
最简单的 Store 安装 Vuex 之后,让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation: // store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { add(state) { state原创 2022-03-22 13:14:55 · 1579 阅读 · 0 评论 -
【Vuex入门】——(一)什么是Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。原创 2022-03-22 12:14:50 · 85 阅读 · 0 评论