vue2.0探索之vuex

2018-06-11

事出必有因，第一次自己这么认真的去构思去写博客，随着项目的需求，组件之间的数据交互变得越来越频繁且关系密切，如果这个时候还局限于props和$emit，觉得自己太low了，于是乎，就想要好好的学习一下vuex，之后发现自己用错了它的功能，接下来好好说道说道。

介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。（我自己感觉其实就是个管家…）

安装

NPM

npm install vuex –save

Yarn

yarn add vuex

在vue项目中引用一些公用的库等都写在main.js，但此次不直接写在其中，通过引入写在store.js文件中，main.js中引入store.js（以下代码均为store.js中内容）：

// main.js
import store from './vuex/store'
Vue.use(store)

new Vue({
  store,
  render: h => h(App)
}).$mount('#app-box')

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// ..

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

成员介绍

State

状态库： Vuex使用的是单一状态树，也就是一个应用仅一个store实例。这个状态库中的数据，在项目任何组件中都可以使用，是全局的状态。

1
2
3

const state = {
    numList: [0, 1, 2, 3, 4, 5]
}

Getter

获取状态数据：类似于computed计算属性，这个部分通常写一些处理状态数据的代码，比如过滤state中的某个状态数据。
第一个参数是state，因为getter会暴露在store中，所以第二个参数getters是可以接受其他模块中的getter

const getters = {
    filterEvenNum (state) {
        state.numList = state.numList.filter(s => s % 2 === 0)
    }
}

Mutation

变化：类似于组件中methods，在vuex中改变store中state的值，只能通过mutation，注意mutation只进行同步操作。

const mutations = {
    increment (state) {
        state.numList.forEach(num => num++)
    }
}

mutation还可以接受传值，这样代码可以改写为：

const mutations = {
    increment (state, value = 1) {
        state.numList.forEach(num => { num += value })
    }
}

触发mutation比较特殊，是通过commit：

store.commit('increment', 2)

//vue页面触发
this.$store.commit('increment', 2)

使用mutation改变状态有需要遵守的规则这里提一个，剩下可以查看官方文档说明。

mutation接受的参数过多时，通常使用对象来作为参数接受，平常封装函数我们也经常这么干，所以so easy，mutation改变状态时最好是用新对象来代替旧对象（ES6写法）

1	state.obj = { ...state.obj, newProp: 123 }

Action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，所以可以使用context.commit, context.rootState, context.getters。

const actions = {
    increment ({ commit }, value) {
        setTimeout(function () {
          commit('increment', value)
        }, 2000)
    }
}

action可以结合ES2015中promise使用：

const actions = {
    increment ({ commit }, value) {
        return new Promise((resolve, reject) => {
            setTimeout(function () {
              commit('increment', value)
              resolve()
            }, 2000)
        })
    }
}

触发action是通过dispatch：

store.dispatch('increment')

//vue页面触发
this.$store.dispatch('increment')

mutation和action都可以通过对象风格的方式提交和分发：

commit({
    type：'increment',
    value： 2
})

Module

module主要针对于比较大型的项目，数据比较繁琐都写在一起会不容易维护，可以根据功能等将store模块化，每个模块拥有自己的 state、mutation、action、getter。我们上面的代码就可以将名称store.js换位num.js仅仅作为操作数据的模块。

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 的状态

vue文件中使用方法

state，getter，mutation，action在vue文件中使用方式均有两种，这里拿state作为例子，其他类似，聪明的你肯定会举一反三：

通过mapState

import { mapState } from 'vuex'
export default {
    // ...
    computed: {
        ...maptate({
            numList: state => state.numList,
            // numArr在此页面中的新名字，'numList'等同于state => state.numList
            numArr: 'numList'
        })
    }
}

如果名字一致，也可以写在数组当中：

1
2
3

mapState([
    'numList'
])

此文件中后续使用this.numList或者this.numArr

通过$store
1
this.$store.state.numList

如果是模块化的store，请看官方说明

项目结构

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

参考文档：https://vuex.vuejs.org/zh/