简介:
Getters 用于对 Store 中的数据进行加工处理形成新的数据。
Getters 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性。
Store 中数据发生变化,Getters 的数据也会跟着变化。
案列
/src/store/index.js状态管理器
import axios, { Axios } from 'axios';
import { CHANGE_APPISSHOW } from './type.js'
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
appIsShow: true,
datalist: [],
}
},
//同步
mutations: {
changeAppIsShow(state, boolParams) {
state.appIsShow = boolParams;
},
dataListInit(state, arrParams) {
state.datalist = arrParams;
}
},
//异步+同步:action不能直接修改state()中的数据,它是也是向mutations提交数据来修改的。
actions: {
async getDataList(store) {
//异步
const result = await axios({
url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&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("获取数据")
//同步:向mutations提交数据:触发dataListInit函数,并向函数传递了一个数组参数
store.commit("dataListInit", result.data.data.cinemas);
}
},
//getters:就相当于vue的计算属性。为什么vue有computed计算属性了,这里还要搞一个getters呢?那是因为架构师想尽可能的把数据的处理过程放到vuex中,vue就作为一个展示数据的地方,实现纯粹的业务,数据分离
//getters:的函数传递参数需要放到匿名函数中来做
getters: {
filterDataList(state) { //这个state就是state()中的数据
return (intParams) => { //这个intParams就是触发filterDataList这个函数的调用方(我们自己)传递的
// return state.datalist.filter(item => {
// return item.eTicketFlag === 0
// })
//注意上面注释代码中匿名函数item=>{return item.eTicketFlag === 0} :加了{}就需要在里面多一个return
return state.datalist.filter(item =>item.eTicketFlag==intParams)
}
}
}
});
export default store
main.js 注册状态状态管理器
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//import store from "../src/store" //状态管理器js 注意:如果仅仅是指定了一个文件夹router,程序会自动去router文件夹下寻找index.js,并导入
//import store from "../src/store/index" //导入状态管理器js 注意:.js可以省略
//import store from "../src/store/myindex.js" //导入状态管理器js 注意:如果我们的状态管理器文件不是index.js 那么我们就得指定具体的名称了
import store from "../src/store/index.js" //导入状态管理器js
var app=createApp(App)
app.use(store) //注册vuex插件:状态管理器
app.mount("#app")
在组件中使用
<template>
<select v-model.number="type">
<option :value="0">App订票</option> <!--:value="0" 用数据绑定的形式,则它的值是数值类型的-->
<option :value="1">前台兑换</option>
</select>
<div>
<ul>
<!--从store的getters中获取数据-->
<li v-for="item in $store.getters.filterDataList(type)" :key="item.cinemaId">{{ item.name }}</li>
<!-- 如果不需要传递参数()可以不写 -->
<!-- <li v-for="item in $store.getters.filterDataList" :key="item.cinemaId">{{ item.name }}</li> -->
</ul>
</div>
</template>
<script>
export default {
data() {
return {
type:0
}
},
mounted() {
if (this.$store.state.datalist.length === 0) {
//如果数据为空,则去触发actions的中的getDataList方法,达到获取datalist数据的目的。而this.$store.state.datalist中的数据存在内容中,其他地方需要这个数据直接从内存中取,相当于有个缓存,
this.$store.dispatch("getDataList");
}
},
}
</script>