vuex的简单应用

一、简介

本文介绍了对vuex的理解以及将上一篇文章改为vuex统一管理

二、vuex理解

1）、vuex是什么

vuex为状态管理，集中管理组件的共用状态以及更新状态的函数等，可以理解为一个全局仓库

2）、vuex的属性

1. state ：state为一个存放状态的对象
2. setters ：setters为一个存放计算属性的对象
3. actions ：actions为一个存放事件回调函数的对象
4. mutations ：mutations为一个存放状态更新函数的对象

3）、vuex的优点

vuex最明显的优点是将状态和函数统一管理，避免了其在组件之中的传来传去

4）、vuex的框图

组件在state或getters中获取状态，当组件触发事件时，给actions派发事件，actions再请求mutations中的状态更新函数，最终改变状态

三、vuex应用

将上文的评论系统改为vuex管理

1）、vuex的注册

在根src目录下创建一个store文件夹，在其中的index.js中注册，
基本上是一样的，不需要改动

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

import state from './state.js'
import actions from './actions.js'
import mutations from './mutations.js'
import getters from './getters.js'

Vue.use(Vuex);

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

记得还要再main.js入口文件中引用

import store from './store'

2）、vuex的使用

1、状态统一管理

将多组件共用的data放到state.js文件中，若有共用的计算属性，要放到getters.js中统一管理

export default {
	comments: [
		{
			name:'Bob',
			content:'Vue大法好'
		},
		{
			name:'Kat',
			content:'Vue还不错'
		},
		{
			name:'Jack',
			content:'Vue so eazy'
		}
	]
}

2、更新的统一管理

上文中有两个更新，增加评论和删除评论，并将操作函数都放到了父组件中，使用vuex后，则不需要将数据和函数传送。根据流程图的步骤，完成操作

• 在组件的事件函数中给action分发事件，除了传函数名以外，还要将要处理的数据传送过去

this.$store.dispatch('addComment',comment);

• 在action.js中请求mutation处理状态（注意commit中传送的数据无论是什么类型，都要包装成一个对象）

export default {
	addComment({commit},comment) {    //添加评论请求
		commit('ADDCOMMENT',{comment})
	},
	deleteComment({commit},index) {  //删除评论请求
		commit('DELETECOMMENT',{index})
	}
}

• 在mutation.js中处理数据

export default {
	ADDCOMMENT(state,{comment}) {   //添加评论
		state.comments.unshift(comment);
	},
	DELETECOMMENT(state,{index}) {  //删除评论
		state.comments.splice(index,1);
	}
}