The above four objects are all in the vuex plug-in store, which is often used to store some data shared globally. But I still feel a little uncomfortable when using it, that is, I wrote a lot of repeated prefixes. At this time, these four objects appeared, which solved this pain point very well. mapState is mainly used to manipulate and obtain data, mapGetters is equivalent to computed properties, and mapMutations and mapActions are simplifications of mutation and action. They can be written as both objects and arrays.
Steps for usage
- Install vuex: >>>npm install vuex (note the version, vue2-vuex3, vue3-vuex4)
- Vue officially recommends writing an index.js file in the store folder, configuring various configuration items, then registering it on Vue, and exposing the ones to be used.
import Vue from "vue"
import Vuex from "vuex"
const actions={
addOddnum(context,value){
context.commit("Idnum",value)
/* console.log("Act1...")
context.dispatch("Act1",value) */
},
//
/* Act1(context,value){
console.log("Act2...")
context.dispatch("Act2",value)
},
Act2(context,value){
console.log("Act2 Now do it")
context.commit("AddOddnum",value)
}, */
}
const mutations={
Idnum(state,value){
console.log(state)
console.log(value)//default enents
state.sum+=value
},
...
}
//
const getters={
he(state,b,c,d){
/* console.log(state)
console.log(b)//undefined
console.log(c)
console.log(d) */
return state.id+100
}
}
//
const state={
id:100,
name:"aaa"
}
Vue.use(Vuex)
export default new Vuex.Store({
actions,
mutations,
getters,
state
})
- Introduced in main.js
import store from "./store/index"
Vue.config.productionTip = false;
const vm=new Vue({
render: h => h(App),
store,
}).$mount('#app');
- It can work next
computed:{
// ...mapState({key:value,...})
...mapState([value,...]),
// ...mapGetters(["value"])
...mapGetters({key:value}),
//
},
methods: {
...mapMutations({key:value}),
...mapActions({key:value})
},
Comments
Post a Comment