对于state、getter、mutation、action来说usdt跑分软件开发(T:I8O、285I、O282V林楠),如果每次使用的时候都用this.$store.state、this.$store.getter等引用,会比较麻烦,代码也重复和冗余,我们可以用辅助函数来帮助我们生成要的代码,辅助函数有如下四个:
mapState(namespace, map) ;用于获取state
mapGetters(namespace, map) ;用于获取getters
mapMutations(namespace, map) ;用于获取mutations
mapActions(namespace, map) ;用于获取actions
每个辅助函数都可以带两个参数:
namespace ;命名空间,也就是模块名
map ;要获取的信息
map有两种用法,可以是对象(键名是当前Vue实例设置的变量名,值是从store要获取的变量名)或者字符串数组(此时获取和设置的变量名为同一个)。
注:使用辅助函数需要在根节点注入store
ps:很多新手可能只会使用辅助函数,不知道还可以用this.$store.state,this.$store.getter这些用法…
这些辅助函数返回的都是一个对象,我们可以配合ES6的对象展开运算符,我们可以极大地简化写法,例如:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
</head>
<body>
<div id="app">
<p>{{no}}</p>
<p>{{No}}</p>
<button @click="test1">测试1</button>
<button @click="test2">测试2</button>
</div>
<script>
const store = new Vuex.Store({
state:{no:100},
getters:{
No:function(state){return state.no+100}
},
mutations:{
increment(state,payload){state.no+=payload.no;}
},
actions:{
increment({commit},info){
setTimeout(function(){
commit('increment',info)
},500)
}
}
})
发表回复