Vuex原理的介绍与项目应用

背景

不同人对Vuex的理解不一，在老项目维护的过程中产生不一样的使用方式，导致项目出现性能和维护上的问题，本文通过对Vuex 的深度理解，来对Vuex 进行实际使用，发挥Vuex 的该有的功能，方便解决开发不一致带来的一系列问题。

Vuex 介绍

Vuex 是进行状态管理的库，通过vuex 可以实现变量的全局通信，数据是双向绑定的。
有了Vuex 之后我们可以对数据进行跨组件通讯。
通过Vuex 我们可以在某个组件中修改某个变量的状态，可以把修改后的变量同步到其它组件中。

Vuex 和 vue-bus的区别。

bus 其实是vue的一个实例，能通过vue $emit事件提交和 $on监听两个方法实现组件之间的通讯。Vuex 提供了更多的核心方法通过state、mutations、actions、modules对状态进行管理。

Vuex 的基本功能的运用

Vuex 最简单的就是实现类似于bus 的通讯的功能。

Vuex的实例化

步骤如下：
1.Vuex 是第三方库需要下载

npm install vuex --save

2.创建文件用于生成store的实例并暴露

// store.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备state对象——保存具体的数据
const state = {
	count:0
}
//准备mutations对象——唯一用于修改state中的数据（必须同步函数）
const mutations = {
	increment(state, pyload){
		state.count =state.count + paylad
	}
}
//提交的是mutation调用mutation的函数（可以是异步函数）
const actions = {
	//模拟异步函数
	incrementAsync(pyload){
		setTimeOut(()=>{
			commit('increment',pyload)
		},3000)
	}	
}
//用于对state的属性进行组合运用，类似于computer属性，不需要对state进行操作的化可以不用定义getters
const getters = {
	carItem : state => {
		return state.count
	}
}


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

在vue 组件中的使用

在main.js 中全局引入

import store from './store.js'
new Vue({
	el:'#app',
	store,
	render: h=> h(App)
})

在组件中修改state的值

有两种方法在组件中修改state中的数据

methods:{
	// 1.调用actions异步函数进行修改
	click(pyload){
		this.$store.dispatch('incrementAsync',pyload)
	}
	// 2.调用mutations的同步函数进行修改
	click(pyload){
		this.$store.commit('increment',pyload)
	}
}

在组件中调用state的值

直接调用state值

// 利用了computed 的响应式更新，当依赖依赖发生变化时触发更新（watch是数据发生变化就触发事件，computed依赖发生变化才会触发）
computed: {
	count() {
		return this.$store.state.count;
	}
}

通过getters 中的函数调用

import {mapGetters} from 'Vuex'
computed: {
    calcList () {
       // 注意：获取getters的值，不需要加括号（当属性使用）
       return this.$store.getters.carItem
     },

获取state、mutations、actions的简写

用vuex 中的mapState,mapMutaions,mapActions可以实现简写，下面以mapState举例，其它两个一样。

import {mapGetters} from 'Vuex'
computed: {
	// 1.简写方法
	...mapGetters(['carItem']),
	// 2.简写方法，需要重命名
    // ...mapGetters({
    //   carItemAlias: 'carItem'
    // }),
    // 3. 直接调用
    // calcList () {
    //   // 注意：获取getters的值，不需要加括号（当属性使用）
    //   return this.$store.getters.carItem
    // },

modules 的使用

在大项目中vuex的状态比较多，为了方便管理，引入了modules的概念，对模块进行划分，在使用的过程中需要指定模块名。