Vuex

安装

npm install vuex --save

yarn add vuex


// Vuex  依赖 Promise，所有需要安装 es6-promise

npm install es6-promise --save 
yarn add es6-promise 

Vuex 介绍

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

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    message: '测试信息'
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

State ------>驱动应用的数据源

1.在组件中 获取store 中的state 数据

1. 在组件中 获取store 中的state 数据

    // 一般是 通过计算属性中声明属性，然后使用  this.$store.state.数据源   来获取数据的
  computed: {
    count () {
      return store.state.count
    }
  }

如何获取多个state呢？

如果想获取多个state数据呢，其实可以在computed 中写多个属性 来获取state，但是当state变化时，会重新求取计算属性，并且触发更新相关联的 DOM，非常影响性能。

好在Vuex 提供了 mapState 辅助函数，减少不必要的开销

1. 首先第一步 必须引入 mapState  
import { mapState } from 'vuex'

2. 在computed 使用即可
computed: mapState({
    counts: state => state.count,
    //counts为自定义的属性： state参数 是stote中的state，然后直接通过state。数据源获取即可
    addNumber (state) {
      return this.numbers + state.count
    }
  })


3. 在页面 直接使用 自定义的属性

Getter

作用类似 computed，但有缓存功能。

使用场景： 当一个组件需要过滤后的state值，你可以在组件中通过filter进行过滤，那么其它组件也需要过滤后的值，你就的再 次过滤state。

​ 当使用getter 处理后，一次处理，多次使用，提高效率

export default new Vuex.Store({
  state: {
    count: 0,
    message: '测试信息',
    arr: [1, 2, 3, 4, 5, 6]
  },
  getters: {
    filterArr: state => {
      return state.arr.filter(items => items % 2 === 0)
    }
  }
})

mapGetters 辅助函数

​ mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

在组件中访问getter 值

this.$store.getters.自定义的属性

在 其它 组件访问该getters 时，值仍然时  [ 2, 4, 6 ]  过滤后的

Mutation

Mutation 是用来更改Store的状态的唯一方法。

它由 事件类型 和 回调函数构成。回调函数是用来更改state状态的，参数为state

使用mutation：

1. 必须在 mutation中注册事件，
2. 然后在组件中通过 store.commit(事件名) 来 触发改变state的状态

注意：

store.commit 参数

store.commit 接收两个参数

​ 第一个参数为： store.mutation中的事件名

​ 第二个参数为： 要传递的 载荷

mutations: {
  increment (state, n) {
    state.count += n
  }
}


store.commit('increment', 10)

mapMutations辅助函数

mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

对象的提交方式

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}


mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}store.commit({
  type: 'increment',
  amount: 10
})

Mutation 使用技巧

在多人协作开发时，随着 mutation 的 type 增多，会维护困难。

官方推荐采用 使用 事件类型，来处理,开发效率提高。

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

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

Action

Action 功能类似 Mutation，

Action 支持 异步操作

Action 提交的 mutation, 不是直接修改state状态

Action 接收参数： 与 store 实例具有相同方法和属性的 context 对象

实例

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

在组件中分发Action

this.$store.dispatch('xxx')

异步执行Action

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

mapActions辅助函数

Action 也支持载荷

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

Module 模块分割

当所有状态对象都集中在个大的对象中，store维护将变得困难。这时，可以使用模块分割成多个对象，最后将对象挂载到store的modeule中,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 的状态