Description
Vuex provides four commonly used auxiliary functions: the purpose is to map the corresponding data and functions in state(), mutaions{}, actions{}, getters{} in vuex, so that we can be more flexible in the component. Simply use these data and functions
- mapState
- mapMutations
- mapActions
- mapGetters
Usage cases
/src/store/index.jsState Manager
import axios, { Axios } from 'axios';
import { CHANGE_APPISSHOW } from './type.js'
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
appIsShow: true,
datalist: [],
}
},
//Synchronize
mutations: {
//Parameter state: is automatically injected into us by vuex. We do not need to pass this parameter when calling, just pass the second parameter boolParams directly.
//Parameter boolParams: It is the parameter we defined, and the user passes it in when initiating the call.
changeAppIsShow(state, boolParams) {
state.appIsShow = boolParams;
},
dataListInit(state, arrParams) {
state.datalist = arrParams;
}
},
//Asynchronous + synchronous: action cannot directly modify the data in state(), it also submits data to mutations for modification.
actions: {
async getDataList(store) {
//asynchronous
const result = await axios({
url: "https://m.maizuo.com/gateway?cityId=110100 & amp;ticketFlag=1 & amp;k=3777796",
headers: {
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16992764191480200349024257","bc":"110100 "}',
'X-Host': 'mall.film-ticket.cinema.list'
}
});
console.log("Get data")
//Synchronization: Submit data to mutations: trigger the dataListInit function and pass an array parameter to the function
store.commit("dataListInit", result.data.data.cinemas);
}
},
//getters: equivalent to vue's calculated properties. Why does Vue have computed properties, and why do we need to create a getter here? That's because the architect wants to put the data processing process into Vuex as much as possible. Vue is used as a place to display data to achieve pure business and data separation.
//Getters: function parameters need to be placed in anonymous functions.
getters: {
filterDataList(state) { //This state is the data in state()
return (intParams) => { //This intParams is passed by the caller (ourselves) who triggered the filterDataList function
// return state.datalist.filter(item => {
// return item.eTicketFlag === 0
// })
//Pay attention to the anonymous function item=>{return item.eTicketFlag === 0} in the above comment code: adding {} requires an extra return in it
return state.datalist.filter(item =>item.eTicketFlag==intParams)
}
}
}
});
export default store
main.js registration status manager
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//import store from "../src/store" //State manager js Note: If you only specify a folder router, the program will automatically go to the router folder to find index.js and import it.
//import store from "../src/store/index" //Import state manager js Note: .js can be omitted
//import store from "../src/store/myindex.js" //Import state manager js Note: If our state manager file is not index.js, then we have to specify a specific name
import store from "../src/store/index.js" //Import state manager js
var app=createApp(App)
app.use(store) //Register vuex plug-in: state manager
app.mount("#app")
Used in components
<template>
<select v-model.number="type">
<option :value="0">App booking</option> <!--:value="0" In the form of data binding, its value is of numeric type -->
<option :value="1">Redemption at the front desk</option>
</select>
<div>
<ul>
<!--Get data from store getters-->
<!-- <li v-for="item in $store.getters.filterDataList(type)" :key="item.cinemaId">{<!-- -->{ item.name }}</li> -->
<!-- Use the auxiliary function instead: it is actually the filterDataList method expanded in...mapGetters(["filterDataList"]) -->
<li v-for="item in filterDataList(type)" :key="item.cinemaId">{<!-- -->{ item.name }}</li>
</ul>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
//hook function
mounted() {
//this.$store.commit("changeAppIsShow", false) code is written in the form of an auxiliary function:
this.changeAppIsShow(false) //It is actually the changeAppIsShow method expanded in...mapMutations(["changeAppIsShow", "dataListInit"]).
console.log("aa",this.appIsShow);//Output: false;
// if (this.$store.state.datalist.length === 0) {
if (this.datalist.length === 0) {
//If the data is empty, trigger the getDataList method in actions to obtain the datalist data. The data in this.$store.state.datalist is stored in the content. Other places need this data to be fetched directly from the memory, which is equivalent to having a cache.
//this.$store.dispatch("getDataList");The code is changed to the following auxiliary function writing method
this.getDataList(); //It is actually the getDataList method expanded in...mapActions(["getDataList"])
}
},
beforeUnmount() {
//this.$store.commit("changeAppIsShow",false) code is written in the form of an auxiliary function:
this.changeAppIsShow(false) //It is actually the changeAppIsShow method expanded in...mapMutations(["changeAppIsShow", "dataListInit"]).
},
//data
data() {
return {
type: 0,
}
},
//Method: Mutations and Actions in vuex are placed in methods for expansion.
methods: {
...mapMutations(["changeAppIsShow", "dataListInit"]), //Expand the Mutations function in the store and use it directly in the DOM: such as changeAppIsShow(), dataListInit(), which can also be used directly in <script> : Such as this.changeAppIsShow(), this.dataListInit()
...mapActions(["getDataList"]) //Expand the Actions function in the store. It can be used directly in the DOM: such as getDataList(). It can also be used directly in <script>: such as this.getDataList()
},
//Computed properties: Getters in vuex, and State are placed in computed for expansion.
computed: {
...mapGetters(["filterDataList"]), //Expand the Getters function in the store. It can be used directly in the DOM: such as filterDataList(). It can also be used directly in <script>: such as this.filterDataList()
...mapState(["appIsShow", "datalist"]) //Expand the State data in the store. It can be used directly in the DOM: such as appIsShow. It can also be used directly in <script>: such as this.appIsShow()
},
}
</script>