个人简介

Echo Blog


江湖无名 安心练剑
  • Vuex4-13-表单模式
    表单处理 当在严格模式中使用 Vuex 时,在属于 Vuex 的 state 上使用 v-model 会比较棘手: <input v-model="obj.message"> 假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象,在用户输入时,v-model 会试图直接修改 obj.message。 在严格模式中,由于这个修改不是在 mutat...
    2021-08-29 13:01:55 | VUE
  • Vuex4-12-严格模式
    严格模式 开启严格模式,仅需在创建 store 的时候传入 strict: true: const store = createStore({ // ... strict: true }) 在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。 这能保证所有的状态变更都能被调试工具跟踪到。 开发环境与发布环境 不要在发布环境下启用严格...
    2021-08-29 13:01:55 | VUE
  • Vuex4-11-插件
    插件 Vuex 的 store 接受 plugins 选项,这个选项暴露出每次 mutation 的钩子。 Vuex 插件就是一个函数,它接收 store 作为唯一参数: const myPlugin = (store) => { // 当 store 初始化后调用 store.subscribe((mutation, state) => { // 每次 m...
    2021-08-29 13:01:55 | VUE
  • Vuex4-10-组合式API
    组合式 API 可以通过调用 useStore 函数,来在 setup 钩子函数中访问 store。 这与在组件中使用选项式 API 访问 this.$store 是等效的。 import { useStore } from 'vuex' export default { setup () { const store = useStore() } } 访问 Sta...
    2021-08-29 13:01:55 | VUE
  • Vuex4-09-struct 项目结构
    Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则: 应用层级的状态应该集中到单个 store 对象中。 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。 异步逻辑都应该封装到 action 里面。 只要你遵守以上规则,如何组织代码随你便。 如果你的 store 文件太大,只需将 acti...
    2021-08-29 13:01:55 | VUE
  • Vuex4-08-Module
    Module 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。 当应用变得非常复杂时,store 对象就有可能变得相当臃肿。 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割: const moduleA = { ...
    2021-08-29 13:01:55 | VUE
  • Vuex4-07-Action
    Action Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作。 让我们来注册一个简单的 action: const store = createStore({ state: { count: 0 }, mutation...
    2021-08-29 13:01:55 | VUE
  • Vuex4-06-Mutation
    mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。 这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数: const store = createStore(...
    2021-08-29 13:01:55 | VUE