VueX里的mapGetters
这些是VueX文件里的import Vue from 'vue'import vuex from 'vuex'Vue.use(vuex);const store = new vuex.Store({//store对象state:{name: '金灿',age:19,number:17763011975},mutations: {edit(state, data){state.name=data.n
·
这些是VueX文件里的
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
const store = new vuex.Store({//store对象
state:{
name: '金灿',
age:19,
number:17763011975
},
mutations: {
edit(state, data){
state.name=data.name
state.age=data.age
state.number=data.number
// 对state对象中添加一个age成员15
// Vue.set(state,"age",19)
// Vue.set(state,"number",17763011975)
// 将添加的name成员删除
// Vue.delete(state,'name')
}
},
getters:{
nameInfo(state){
return "姓名:"+state.name+
"号码:"+state.number
},
fullInfo(state,getters){
return getters.nameInfo+'年龄:'+state.age
}
},
actions:{
aEdit(context,payload){
setTimeout(()=>{
context.commit('edit',payload)
},2000)
}
},
models:{
a:{
state:{},
getters:{},
}
}
})
export default store
组件里
组件内调用一般都像这样
methods:{
add(){
console.log(this.$store.state.name)
}
},
但其实可以用引用vuex里的方法
import { mapGetters, mapMutations, mapActions } from 'vuex'
再:
export default {
data(){
return({
})
},
computed: {
...mapGetters(['name','age','number'])
},
methods: {
...mapMutations(['edit']),
...mapActions(['aEdit'])
},
}
然后这样直接引入就好了
created () {
// this.edit({name: 'kk',age: 10, number: 1762727126})
this.aEdit({name: 'kkdf',age: 12, number: 88787})
}
更多推荐
已为社区贡献10条内容
所有评论(0)