罗湖区住房和建设局网站,wordpress固定链接规则文件夹,苏州自助模板建站,网站开发团队简介简介#xff1a;
Getters 用于对 Store 中的数据进行加工处理形成新的数据。
Getters 可以对 Store 中已有的数据加工处理之后形成新的数据#xff0c;类似 Vue 的计算属性。 Store 中数据发生变化#xff0c;Getters 的数据也会跟着变化。
案列
/src/store/index.js状态…简介
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 vuexconst 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?cityId110100ticketFlag1k3777796,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} :加了{}就需要在里面多一个returnreturn state.datalist.filter(item item.eTicketFlagintParams)}}}
});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 appcreateApp(App)app.use(store) //注册vuex插件状态管理器app.mount(#app)在组件中使用
templateselect v-model.numbertypeoption :value0App订票/option !--:value0 用数据绑定的形式则它的值是数值类型的--option :value1前台兑换/option/selectdivul!--从store的getters中获取数据--li v-foritem in $store.getters.filterDataList(type) :keyitem.cinemaId{{ item.name }}/li!-- 如果不需要传递参数()可以不写 --!-- li v-foritem in $store.getters.filterDataList :keyitem.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
