vuex store使用总结 2 ( 功能化的使用 )

                                       vuex store使用总结 2 ( 功能化的使用 )

vuex store使用总结 1

已经介绍了 vuex 的 一些基本的使用方式,但是仅仅停留在了 认识的层面,在实际生产过程中不可能 只有一个脚本记录 整个项目的 所以数据,接下里我们将 vuex store 中的数据进行优化 进行拆分

我们在 store文件夹 中 分别创建  state.js actions.js   getters.js   mutations.js  这四个 js 文件 把 index.js(第一节中的代码)中的代码 分别拆分到 上面四个文件中

state.js

//设置属性 用来存储数据
export const = message: {}
export const = localuser: {}

actions.js

//应用 mutation
export const setUser = ({
    commit
}, data) => {
    commit('setLocalUser', data)
}

getters.js  

//对应方法 用来获取属性的状态
export const getMessage = state => state.message

mutations.js

//更改属性的状态
export const = setMessage(state, data) => {
	state.message = data
}

//更改用户状态信息
export const = setLocalUser(state, data) => {
	if (data) {
		state.localUser = data
	} else {
		state.localUser = null
	}
}

index.js 就变成这样了

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

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

Vue.use(Vuex)

export const store = new Vuex.Store({
	state,
	getters,
	mutations,
	actions
})

像这样 具体功能就可以细分下去了

另外两篇:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

nicepainkiller

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值