Vue全家桶之——Vuex

时间：2023-03-09 04:06:27
Vue全家桶之——Vuex

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

Vue全家桶之——Vuex

  • 多个视图依赖于同一状态。
  • 来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

Vue全家桶之——Vuex

如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

store

主要分为5个模块

  • state: 存储数据

  • getter: 获取store 属性方法

  • mutatuon: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,类似于事件。

  • action: Action 提交的是 mutation，而不是直接变更状态。

  • module：模块化

  1. state
const state = {

  title: 'doubanMovie', // 标题

  movingList: {  // 列表

    subjects: []

    },

  }

复制代码
  1. getter: 可以认为是 store 的计算属性 mapGetters 辅助函数 
export const getters = {

  title: state => {

    return state.title

  },

  movingList: state => {

    for (let subject of state.movingList.subjects) {

      subject.rating.average = subject.rating.average / 2

    }

    return state.movingList

  }

}

复制代码
  1. mutatuin

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数： mutation 都是同步事务

import * as types from './types' //常量 类名

export const mutations = {

  [types.MOVING_TITLE] (state, {title}) {

    state.title = title

  },

  [types.MOVING_LIST] (state, {list}) {

    state.movingList = list

  },

}

复制代码

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。

  1. action: Action 类似于 mutation，不同在于：
  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。
export const actions = {

  /**

   * 获取列表

   * @param commit

   */

  getMoving ({commit, state}) {

    utils.get('/movie/in_theaters', {city: state.city}).then(res => {

      commit('MOVING_LIST', {list: res})

      commit('MOVING_LOADING', {loading: false})

    })

  }

}

复制代码

Action 通过 store.dispatch 方法触发：分发 store.dispatch('increment')

  1. module Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
const moduleA = {

  state: { ... },

  mutations: { ... },

  actions: { ... },

  getters: { ... }

}

const moduleB = {

  state: { ... },

  mutations: { ... },

  actions: { ... }

}

const store = new Vuex.Store({

  modules: {

    a: moduleA,

    b: moduleB

  }

})

store.state.a // -> moduleA 的状态

store.state.b // -> moduleB 的状态

复制代码

项目结构 （只是推荐）

  1. 应用层级的状态应该集中到单个 store 对象中。

  2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

  3. 异步逻辑都应该封装到 action 里面。

对于大型应用，会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

├── index.html

├── main.js

├── api

│   └── ... # abstractions for making API requests

├── components

│   ├── App.vue

│   └── ...

└── store

    ├── index.js          # where we assemble modules and export the store

    ├── actions.js        # root actions

    ├── mutations.js      # root mutations

    └── modules

        ├── cart.js       # cart module

        └── products.js   # products module

作者：o逍遥生o
链接：https://juejin.im/post/5ceb85f1e51d4556db69498d
来源：掘金

相关文章