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);
	}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值