vuex的简单应用
一、简介
本文介绍了对vuex的理解以及将上一篇文章改为vuex统一管理
二、vuex理解
1)、vuex是什么
vuex为状态管理,集中管理组件的共用状态以及更新状态的函数等,可以理解为一个全局仓库
2)、vuex的属性
- state :state为一个存放状态的对象
- setters :setters为一个存放计算属性的对象
- actions :actions为一个存放事件回调函数的对象
- 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);
}
}