vuex浅析

发表于 | 更新于 | 阅读次数：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

核心概念

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

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

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

只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

State

将状态存储在state中，在 Vue 组件中获得 Vuex 状态有几种方法

在计算属性中返回某个状态

1
2
3
4
5
6
7
8
import store from '@/store'
...
computed: {
  isVip () {
    return store.state.isVip
  }
}
...

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中

1
2
3
4
5
6
7
8
9
10
11
// main.js
import Vue from "vue"
import App from "./App"
import store from "@/store"

new Vue({
  el: "#app",
  store,
  components: { App },
  template: "<App/>"
});

组件能通过 this.$store 访问到。
现在无需再在组件中 import store

1
2
3
4
5
6
7
...
computed: {
  isVip () {
    return this.$store.state.isVip
  }
}
...

mapState 辅助函数

1
2
3
4
5
6
7
8
9
10
11
12
13
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: {
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
      isVip: 'isVip',
      isAdmin: 'isAdmin'
    })
  }
}

Getter

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const store = new Vuex.Store({
  state: {
    isAdmin: true,
    isVip: false,
    products: [
      {
        id: '100000',
        name: 'vue',
        visible: true
      },
      {
        id: '100001',
        name: 'vue-router',
        visible: false
      },
      {
        id: '100002',
        name: 'vuex',
        visible: false
      },
    ]
  },
  getters: {
    isAdminOrVip: state => {
      return state.isAdmin || state.isVip
    },
  }
})

通过属性访问

1
this.$store.getters.isAdminOrVip // -> true

Getter 也可以接受其他 getter 作为第二个参数：

1
2
3
4
5
6
7
8
getters: {
  // ...
  getVisibleProducts: (state, getters) => {
    return getters.isAdminOrVip 
      ? state.products 
      : state.products.filter(v => v.visible)
  } 
}

mapGetters 辅助函数

1
2
3
4
5
6
7
8
9
10
11
12
13
import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'isAdminOrVip',
      'visibleProducts': 'getVisibleProducts', //另取一个名字，使用对象形式
      // ...
    ])
  }
}

Mutation

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

1
2
3
4
5
6
7
8
9
10
11
const store = new Vuex.Store({
  state: {
    products: [...]
  },
  mutations: {
    addProducts (state, payload) {
      // 变更状态
      state.products = [...state.products, ...payload]
    }
  }
})

1
store.commit('addProducts', [{name: 'vue-server-render'}])

使用常量替代 Mutation 事件类型

同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然。

1
2
// mutation-types.js
export const ADD_PRODUCTS = 'ADD_PRODUCTS'

1
2
3
4
5
6
7
8
9
10
11
12
13
// store.js
import Vuex from 'vuex'
import { ADD_PRODUCTS } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [ADD_PRODUCTS] (state, payload) {
      // mutate state
    }
  }
})

Action

Action 类似于 mutation，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const store = new Vuex.Store({
  state: {
    products: [...]
  },
  mutations: {
    addProducts (state, payload) {
      // 变更状态
      state.products = [...state.products, ...payload]
    }
  },
  actions: {
    doAddProducts(context, payload) {
      // 可以执行任意的异步操作
      context.commit('addProducts', payload)
    }
  }
})

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation。
用ES2015的写法，actions还可以写成

1
2
3
4
5
actions: {
  doAddProducts({ commit }, payload) {
    commit('addProducts', payload)
  }
}

Mutation 通过 store.commit 来提交
Action 则通过 store.dispatch 来分发

1
store.dispatch('doAddProducts', payload)

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，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 的状态

vuex demo

vuex demo
参考网址： vuex

当一切开始以后，这个世界上再也没有什么让我害怕的事情了。
——王小波