Vue技术-mapstart与mapGetters=》模块化+命名空间
Posted 勇敢*牛牛
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue技术-mapstart与mapGetters=》模块化+命名空间相关的知识,希望对你有一定的参考价值。
Vue技术-mapstart与mapGetters=》模块化+命名空间
导入mapState
import mapState from 'vuex'
使用mapState
获取state内容,避免过多的字符串在模板里面堆砌
借助mapStart生成计算属性,从start中读取数据(对象写法)
computed:
bigSum()
return this.$store.getters.bigSum
,
...mapState( name: 'name' )
,
mounted()
const x = mapState(name:'name');
console.log('x is',x);
但是对于这段代码来说是es6的新语法规则,将一个数据对象的属性值给另一个对象
...mapState( name: 'name' )
mapGetters就是获取getters数据
computed:
// bigSum()
// return this.$store.getters.bigSum
// ,
...mapGetters(['bigSum']),
...mapState( name: 'name' )
,
他们有对象写法和数组写法,但特别注意的是这个字符串和变量的简写方式。
四个map方法的使用
-
mapState方法:用于帮助我们映射
state
中的数据为计算属性computed: //借助mapState生成计算属性:sum、school、subject(对象写法) ...mapState(sum:'sum',school:'school',subject:'subject'), //借助mapState生成计算属性:sum、school、subject(数组写法) ...mapState(['sum','school','subject']), ,
-
mapGetters方法:用于帮助我们映射
getters
中的数据为计算属性computed: //借助mapGetters生成计算属性:bigSum(对象写法) ...mapGetters(bigSum:'bigSum'), //借助mapGetters生成计算属性:bigSum(数组写法) ...mapGetters(['bigSum']) ,
-
mapActions方法:用于帮助我们生成与
actions
对话的方法,即:包含$store.dispatch(xxx)
的函数methods: //靠mapActions生成:incrementOdd、incrementWait(对象形式) ...mapActions(incrementOdd:'jiaOdd',incrementWait:'jiaWait') //靠mapActions生成:incrementOdd、incrementWait(数组形式) ...mapActions(['jiaOdd','jiaWait'])
-
mapMutations方法:用于帮助我们生成与
mutations
对话的方法,即:包含$store.commit(xxx)
的函数methods: //靠mapActions生成:increment、decrement(对象形式) ...mapMutations(increment:'JIA',decrement:'JIAN'), //靠mapMutations生成:JIA、JIAN(对象形式) ...mapMutations(['JIA','JIAN']),
备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
模块化+命名空间
-
目的:让代码更好维护,让多种数据分类更加明确。
-
修改
store.js
const countAbout = namespaced:true,//开启命名空间 state:x:1, mutations: ... , actions: ... , getters: bigSum(state) return state.sum * 10 const personAbout = namespaced:true,//开启命名空间 state: ... , mutations: ... , actions: ... const store = new Vuex.Store( modules: countAbout, personAbout )
-
开启命名空间后,组件中读取state数据:
//方式一:自己直接读取 this.$store.state.personAbout.list //方式二:借助mapState读取: ...mapState('countAbout',['sum','school','subject']),
-
开启命名空间后,组件中读取getters数据:
//方式一:自己直接读取 this.$store.getters['personAbout/firstPersonName'] //方式二:借助mapGetters读取: ...mapGetters('countAbout',['bigSum'])
-
开启命名空间后,组件中调用dispatch
//方式一:自己直接dispatch this.$store.dispatch('personAbout/addPersonWang',person) //方式二:借助mapActions: ...mapActions('countAbout',incrementOdd:'jiaOdd',incrementWait:'jiaWait')
-
开启命名空间后,组件中调用commit
//方式一:自己直接commit this.$store.commit('personAbout/ADD_PERSON',person) //方式二:借助mapMutations: ...mapMutations('countAbout',increment:'JIA',decrement:'JIAN'),
以上是关于Vue技术-mapstart与mapGetters=》模块化+命名空间的主要内容,如果未能解决你的问题,请参考以下文章
使用 Vuex,为啥 mapGetters 不接受与 mapState 相同的语法?