酒店用品网站源码,网站备案万网,舆情报告单,门户网站功能VCA中不支持辅助函数#xff0c;因为辅助函数中是用this.$store#xff0c;而VCA中没有绑定this的 由于使用单一状态树#xff0c;应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时#xff0c;store 对象就有可能变得相当臃肿。
这句话的意思是#xff0c;…VCA中不支持辅助函数因为辅助函数中是用this.$store而VCA中没有绑定this的 由于使用单一状态树应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时store 对象就有可能变得相当臃肿。
这句话的意思是如果把所有的状态都放在/src/store/index.js中当项目变得越来越大的时候Vuex会变得越来越难以维护
分成模块化后每个人负责自己的那个模块开发然后在/src/store.index.js中将这些模块进行汇总这样可以避免多人开发的协调问题。
案列
/src/router/index.js 路由器
import { createRouter, createWebHashHistory,createWebHistory } from vue-router; //导入vue-router路由模块,createWebHashHistor函数
//import Home from ../views/Home.vue //异步加载的组件这里不需要
//import List from ../views/List.vue //异步加载的组件这里不需要进行导入,所以要注释掉const routes [{path: /, //路径: redirect: {name: ListA //重定向到路由名称为mylist的路由中这样当浏览器输入的是http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/list}},{path: /lista, //路径//当路由被触发时该组件才会被异步加载举列打开页面就不会加载所有的组件而是根据当前页面需要的组件进行异步加载//这样可以减少初始加载时间提升用户体验同时也节省了不必要的资源消耗。name:ListA,component: () import(../views/ListA.vue)},{path: /listb, //路径//当路由被触发时该组件才会被异步加载举列打开页面就不会加载所有的组件而是根据当前页面需要的组件进行异步加载//这样可以减少初始加载时间提升用户体验同时也节省了不必要的资源消耗。name:ListB,component: () import(../views/ListB.vue)}
]//创建路由对象
const router createRouter({//history:createWebHashHistory() 这种方式是按照hash路由模式来路由导航这种路由模式的url地址会存在 /#/ 样式是http://localhost:5173/#/listhistory: createWebHistory(), //这种方式基于浏览器 history API 的路由模式url的样式是http://localhost:5173/listroutes, //routes:routes的缩写})export default router //导出router路由对象//导出router路由对象
状态管理器模块
/src/views/ListAModule.js ListA.vue组件单独使用的状态管理器模块
//ListA.vue组件使用的vuex模块
import axios from axios
const ListAModule {namespaced: true, //开启命名空间建议开启开启的好处是可以vuex模块化开发中使用辅助函数否则无法使用state() {return {name: 张三,datalist: []}},mutations: {changeName(state, strParams) {state.name strParams},dataListInit(state, arrParams) {state.datalist arrParams;}},actions: {async getDataList(store) {//异步const result await axios({url: https://m.maizuo.com/gateway?cityId110100pageNum1pageSize10type1k7069698,headers: {X-Client-Info: {a:3000,ch:1002,v:5.2.1,e:16992764191480200349024257},X-Host: mall.film-ticket.film.list}})//同步向mutations提交数据触发dataListInit函数并向函数传递了一个数组参数store.commit(dataListInit, result.data.data.films);}},getters: {filterDataList(state) {return (keyword) {console.log(state.datalist);return state.datalist.filter(item item.name.includes(keyword));}}}
}
export default ListAModule;
/src/views/ListBModule.js ListB.vue组件单独使用的状态管理器模块
//ListB.vue组件使用的vuex模块
import axios from axios
const ListBModule {namespaced: true, //开启命名空间建议开启开启的好处是可以vuex模块化开发中使用辅助函数否则无法使用state() {return {name: 李四,datalist: []}},mutations: {changeName(state, strParams) {state.name strParams},dataListInit(state, arrParams) {state.datalist arrParams;}},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: {filterDataList(state) {return (intParams) {return state.datalist.filter(item item.eTicketFlag intParams)}}}
}export default ListBModule;
状态管理器模块汇总
import axios, { Axios } from axios;
import { createStore } from vueximport ListAModule from ../views/ListAModule.js
import ListBModule from ../views/ListBModule.js //导入模块const store createStore({modules: {ListAModule, //ListAModel:ListAModel简写 注册ListAModel模块ListBModule //ListBModel:ListBModel简写 注册ListBModel模块}
});export default store
注册路由器 和 状态管理器
import { createApp } from vue
import ./style.css
import App from ./App.vueimport router from ../src/router/index.js //导入状态管理器js
import store from ../src/store/index.js //导入状态管理器js var appcreateApp(App)app.use(router);app.use(store) //注册vuex插件状态管理器app.mount(#app)
ListA.vue组件电影列表
templatedivdiv!-- 从store中的state中取数获取ListAModule模块state中的name --姓名 {{ store.state.ListAModule.name }}/divinput typetext v-model.lazykeyword placeholder搜索ul!-- 从store中的Getters中取数:执行ListAModule模块Getters中的filterDataList方法 --li v-foritem in store.getters[ListAModule/filterDataList](keyword) :keyitem.filmId{{ item.name }}/li/ul/div
/template
script setup
// VCA中不支持辅助函数因为辅助函数中是用this.$store而VCA中没有绑定this的
import { useStore } from vuex
import {ref,onMounted} from vue
const store useStore();const keywordref();
onMounted((){if(store.state.ListAModule.datalist.length0){store.dispatch(ListAModule/getDataList);//执行ListAModule模块Actions中的getDataList方法}
})/script
style scoped
li {padding: 10px;
}
/style
ListB.vue组件影院列表
templatediv!-- 从store中的state中取数获取ListBModule模块state中的name --div 姓名{{ store.state.ListBModule.name }}/divselect v-modeltypeoption :value0APP订票/optionoption :value1前台兑换/option/selectul!-- 从store中的Getters中取数:执行ListBModule模块Getters中的filterDataList方法 --li v-foritem in store.getters[ListBModule/filterDataList](type) :keyitem.cinemaId {{ item.name }}/li/ul/div
/template
script setup
// VCA中不支持辅助函数因为辅助函数中是用this.$store而VCA中没有绑定this的
import { useStore } from vuex
import { ref, onMounted } from vue
const store useStore();const type ref(0);
onMounted(() {if (store.state.ListBModule.datalist.length 0) {store.dispatch(ListBModule/getDataList); //执行ListBModule模块Actions中的getDataList方法}
})
/script
