Vuex使用(实战记录)

Vuex 是什么？

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

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

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

对于问题二，咱们常常会采用父子组件直接引用或者经过事件来变动和同步状态的多份拷贝。以上的这些模式很是脆弱，一般会致使没法维护的代码。

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

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

store

主要分为5个模块

• state: 存储数据

• getter: 获取store 属性方法

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

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

• module：模块化

1. state

const state = {
  title: 'doubanMovie', // 标题
  movingList: {  // 列表
    subjects: []
    },
  }
复制代码

2. 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
  }
}
复制代码

3. 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 实现中是很常见的模式。

4. 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')

5. 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
复制代码