理解Vuex

理解Vuex

Vuex是什么

概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

Vuex GitHub地址

Vuex的一个很大的作用就是共享组件之间的数据。

全局事件总线也可以共享组件之间的数据。

全局事件总线（GlobalEventBus）
一种可以在任意组件间通信的方式，本质上就是一个对象，它必须满足以下条件

1. 所有的组件对象都必须能看见他
2. 这个对象必须能够使用on emit off 方法去绑定、触发和解绑事件

定义全局事件总线

new Vue({
   	...
   	beforeCreate() {
   		Vue.prototype.$bus = this // 安装全局事件总线，$bus 就是当前应用的 vm
   	},
    ...
})

使用事件总线接受数据：

export default {
    methods(){
        demo(data){...}//方法的回调，数据处理
    }
    ...
    mounted() {
        this.$bus.$on('xxx',this.demo)//接收数据
    }
}

了解了全局事件总线的组件之间的通信。接下来了解一下Vuex的用法。

2.Vuex什么时候用

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态

Vuex的工作原理图

搭建Vuex环境

下载安装：

npm i Vuex

创建文件/src/store/index.js, 该文件用于创建Vuex中最核心的仓库

import Vue from 'vue'
import Vuex from 'vuex'	// 引入Vuex

Vue.use(Vuex)	// 应用Vuex插件

const actions = {}		// 准备actions——用于响应组件中的动作
const mutations = {}	// 准备mutations——用于操作数据（state）
const state = {}			// 准备state——用于存储数据

// 创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

在main.js文件中引入Vuex插件，在index.js文件中使用。

import Vue from 'vue'
import App from './App.vue'
import store from './store'	// 引入store

Vue.config.productionTip = false

new Vue({
	el: '#app',
	render: h => h(App),
	store,										// 配置项添加store
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

Vuex 主要四部分：

1. state：包含了store中存储的各个状态。
2. getter: 类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。
3. mutation: 一组方法，是改变store中状态的执行者，只能是同步操作。
4. action: 一组方法，其中可以包含异步操作。

State

Vuex 使用 state 来存储应用中需要共享的状态。为了能让 Vue 组件在 state更改后也随着更改，需要基于state 创建计算属性。

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count  // count 为某个状态
    }
  }
}

Getter

类似于 Vue 中的 计算属性（可以认为是 store 的计算属性），getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter 方法接受state作为其第一个参数：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

通过属性访问

Getter 会暴露为 store.getters 对象，可以以属性的形式访问这些值：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter 方法也接受 state和其他getters作为前两个参数。

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodosCount // -> 1

我们可以很容易地在任何组件中使用它：

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

注意： getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

通过方法访问

也可以通过让 getter 返回一个函数，来实现给 getter 传参。在对 store 里的数组进行查询时非常有用。

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

注意： getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。也就是说，前面两个都是状态值本身，

mutations

才是改变状态的执行者。

注意：mutations只能是同步地更改状态。

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

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

调用 store.commit 方法：

store.commit('increment')

提交载荷（Payload）

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}
this.$store.commit('increment', 10)

其中，第一个参数是state，后面的参数是向 store.commit 传入的额外的参数，即 mutation 的 载荷（payload）。

store.commit方法的第一个参数是要发起的mutation类型名称，后面的参数均当做额外数据传入mutation定义的方法中。

规范的发起mutation的方式如下：

// 以载荷形式
store.commit('increment'，{
  amount: 10   //这是额外的参数
})

// 或者使用对象风格的提交方式
store.commit({
  type: 'increment',
  amount: 10   //这是额外的参数
})

额外的参数会封装进一个对象，作为第二个参数传入mutation定义的方法中。

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

Action

想要异步地更改状态，就需要使用action。action并不直接改变state，而是发起mutation。

注册一个简单的 action：

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

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。

实践中，我们会经常用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

在action内部执行异步操作：

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

发起action的方法形式和发起mutation一样，只是换了个名字dispatch。

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

Actions 支持同样的载荷方式和对象方式进行分发

Action处理异步的正确使用方式

想要使用action处理异步工作很简单，只需要将异步操作放到action中执行（如上面代码中的setTimeout）。

要想在异步操作完成后继续进行相应的流程操作，有两种方式:

1. store.dispatch返回相应action的执行结果，而action的处理函数返回的就是Promise，所以store.dispatch仍然返回一个Promise。

   actions: {
     actionA ({ commit }) {
       return new Promise((resolve, reject) => {
         setTimeout(() => {
           commit('someMutation')
           resolve()
         }, 1000)
       })
     }
   }
   

   现在可以写成：

   store.dispatch('actionA').then(() => {
     // ...
   })
   

   在另外一个 action 中也可以：

   actions: {
     // ...
     actionB ({ dispatch, commit }) {
       return dispatch('actionA').then(() => {
         commit('someOtherMutation')
       })
     }
   }
   

2. 利用async/await 进行组合action。代码更加简洁。

   // 假设 getData() 和 getOtherData() 返回的是 Promise
   
   actions: {
     async actionA ({ commit }) {
       commit('gotData', await getData())
     },
     async actionB ({ dispatch, commit }) {
       await dispatch('actionA') // 等待 actionA 完成
       commit('gotOtherData', await getOtherData())
     }
   }
   

   一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

Action与Mutation的区别

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作，而Mutation只能且必须是同步操作。

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

这时我们可以将 store 分割为模块（module），每个模块拥有自己的 state 、 getters 、mutations 、actions 、甚至是嵌套子模块——从上至下进行同样方式的分割。

代码示例：

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

嵌套子模块

首先创建子模块的文件：

// products.js

// initial state
const state = {
  added: [],
  checkoutStatus: null
}
// getters
const getters = {
  checkoutStatus: state => state.checkoutStatus
}
// actions
const actions = {
  checkout ({ commit, state }, products) {
  }
}
// mutations
const mutations = {
  mutation1 (state, { id }) {
  }
}
export default {
  state,
  getters,
  actions,
  mutations
}

然后在总模块中引入：

import Vuex from 'vuex'
import products from './modules/products' //引入子模块
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    products   // 添加进模块中
  }
})

模块化+命名空间

1. 目的：让代码更好维护，让多种数据分类更加明确

2. 修改store.js

   为了解决不同模块命名冲突的问题，将不同模块的namespaced: true，之后在不同页面中引入getteractionsmutations时，需要加上所属的模块名

const countAbout = {
  namespaced: true,	// 开启命名空间
  state: {x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){ return state.sum * 10 }
  }
}

const personAbout = {
  namespaced: true,	// 开启命名空间
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})