验证中...
码云 IDEA 插件最新版本发布,支持 Pull Request
Vuex之state、actions、mutations、getters以及modules
原始数据 复制代码
#1. store 中定义 state、actions、mutations、getters
#// state -> state.js
export default {
count: 0,
firstName: 'jocky',
lastName: 'Lou'
}
#// actions -> actions.js
export default {
updateCountAsync(ctx, count) {
#// 只能接受两个参数:
#// 第一个参数 ctx 为上下文对象: { state, rootState, gettters, rootGetters, commit, dispatch }
#// 其中,state为当前模块state, rootState为全局的state,getters为当前模块getters, rootGetters为全局getters, commit为方法, dispatch 也是一个方法
#// 第二个参数为 payload, 只能有一个payload, 如果要传多个payload,可以把多个变量封装成一个对象
setTimeout(() => {
ctx.commit('updateCount', count)
}, 1000)
}
}
#// mutations -> mutations.js
export default {
updateCount(state, count) {
state.count = count
}
}
#// getters -> getters.js
export default {
fullName (state) {
return `${state.firstName} ${state.lastName}`
}
}
#//modules -> a.js
export default {
#//namespaced为true,使得每个模块有各自独立的命名空间
namespaced: true,
state: {
text: 1
},
actions: {
add(ctx) {
#// 默认调用当前模块中的 mutations
ctx.commit('updateText', ctx.rootState.count)
#// 如果要调用全局或者其它模块中的mutations,需要加 { root: true }
ctx.commit('updateCount', 789, {root: true})
}
},
mutations: {
updateText(state, text) {
#// 默认访问的是当前模块中的state
state.text = text
}
},
getters: {
}
}
#//modules -> b.js
export default {
state: {
text: 2
},
actions: {
testActions(ctx){
#// 如果要调用 a中的 mutations,也需要加 { root: true }, 并且,需要在mutations名前面加上‘模块名/’
ctx.commit('a/updateText', 'test text test text2', {root: true})
}
},
mutations: {
},
getters: {
}
}
#2. 组件中引入 store
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
computed: {
#// 访问 state
...mapState({
count: state => state.count,
#// 访问模块中的变量,需通过:state.模块名.变量名
textA: state => state.a.text
}),
#// 不使用mapState方式,访问state
#// count () {
#// return this.$store.state.count
#// },
#// textA () {
#// return this.$store.state.a.text
#// },
#// ...mapState 数组方式,访问state
#// 如果要访问模块中的变量,建议使用第一种,...mapState对象方式
#// ...mapState(['count']),
#// 访问 getters
...mapGetters({
'fullName': 'fullName' #// 注意是:字符串格式
}),
#// 不使用mapGetters方式,访问 getters
#// fullName () {
#// return this.$store.getters.fullName
#// },
#// ...mapGetters 数组方式,访问 getters
#// ...mapGetters(['fullName'])
},
methods: {
#// 访问 actions
#// 如果模块中声明了namespaced:true,则访问该模块中的actions,需要通过 '模块名/actions名'
#// 否则不需要,直接类似全局访问即可
...mapActions(['updateCountAsync', 'a/add']),
#// 访问 mutations
#// 如果模块中声明了namespaced:true,则访问该模块中的mutations,需要通过 '模块名/mutations名'
#// 否则不需要,直接类似全局访问即可
...mapMutations(['updateCount','a/updateText'])
}
}
#3. 组件中使用 store
<template>
<div>
{{count}}-----{{fullName}}
<div>
</template>
mounted(){
#// 调用 actions
this.updateCountAsync(123)
#// 调用 mutations
this.updateCount(456)
#// 调用模块a中的 actions
this['a/add']()
#// 调用模块a中的 mutations
this['a/updateText'](456)
}

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助