免费按模板制作微网站,厦门十大软件公司,网站设计开发招聘,服务营销的概念Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。Vuex结构图下图是我总结的Vuex结构图。Vuex用法以一个Vue项目中的商家信息搜索功能为例#xff0c;记录Vuex的使…Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。Vuex结构图下图是我总结的Vuex结构图。Vuex用法以一个Vue项目中的商家信息搜索功能为例记录Vuex的使用。分析搜索功能的实现1、发送ajax请求得到后台响应的数据将结果展现在界面上。2、界面的显示一定是根据数据展示的。编码流程:1、写接口函数发送ajax请求2、写Vuex(1)先写state先确定要保存一个什么样的状态发送请求后响应得到的搜索商家列表searchShops: [] 。searchShops: [] // 搜索商家列表(2)写mutation-types:export const RECEIVE_SEARCH_SHOPS receive_search_shops // 接收搜索的商品数组(3)写mutations改变state[RECEIVE_SEARCH_SHOPS](state, {searchShops}) {state.searchShops searchShops},(4)写actions://异步搜索商家列表async searchShop({commit, state}, keyword) {//从state中解构得到经纬度数据const {latitude, longitude} state// 发送异步ajax请求获取搜索商家列表resultconst result await reqSearchGoods(latitude,longitude, keyword)// 等待异步函数执行完之后再执行下一行的提交 mutation// 提交一个 mutation 请求与 mutations 模块中更新状态的方法名称一致// commit(更新状态的方法名称{更新的数据})// 这里之所以是 result.data 是从api文档查看的commit(RECEIVE_SEARCH_SHOPS, {searchShops: result.data})}3、写组件组件模板静态》动态。(1)在组件的methods中触发actionsconst keyword this.keyword.trim()// 分发事件this.$store.dispatch(searchShop, keyword)(2)分发事件后Vuex中就有返回的数据了此时先去浏览器开发工具的Devtools中的Vuex中查看。(3)有了数据之后将数据读取展现在组件中。3.1)在组件中引入{mapState}import {mapState} from vuex3.2)在计算属性中:computed: {...mapState([searchShops])},3.3)取数据到静态组件模板中:{{}}
