Vue基础21之Vuex第二节
创始人
2024-06-03 22:23:27
0

Vue基础21

  • Vuex
    • 多组件共享数据
      • Calculation.vue
      • Persons.vue
      • src/store/index.js
    • vuex模块化+namespace
      • 模块化
        • src/store/index.js
        • Calculation.vue
        • Persons.vue
        • App.vue
      • 发送Ajax请求处理并拆分store
        • 请求
        • src/store/personOptions.js
        • src/store/countOptions.js
        • main.js
        • src/store/index.js
        • Persons.vue
        • Calculation.vue
        • App.vue
    • 总结:模块化+命名空间

Vuex

多组件共享数据

在这里插入图片描述

Calculation.vue

Persons.vue

src/store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)//准备actions——用于响应组件中的动作
const actions={addOdd(context,value){if(context.state.sum%2){console.log("actions中的addOdd被调用了")context.commit("Addmore",value)}},addWait(context,value){setTimeout(()=>{console.log("actions中的addWait被调用了")context.commit("Addmore",value)},500)}
}
//准备mutations——用于操作数组(state)
const mutations={Addmore(state,value){console.log("mutations中的Addmore被调用了")state.sum+=value},Deduce(state,value){console.log("mutations中的Deduce被调用了")state.sum-=value},AddPerson(state,value){state.personList.unshift(value)}
}
//准备state——用于存储数组
const state={sum:0,school:"幸福大学",subject:"计算机",personList:[{id:"001",name:"张三"}]
}//准备getters——用于将state中的数据进行加工
const getters={bigSum(state){return state.sum*10}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})

请添加图片描述

vuex模块化+namespace

在这里插入图片描述

模块化

src/store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)//求和相关的配置
const countOptions={namespaced:true,//准备actions——用于响应组件中的动作actions:{addOdd(context,value){if(context.state.sum%2){console.log("actions中的addOdd被调用了")context.commit("Addmore",value)}},addWait(context,value){setTimeout(()=>{console.log("actions中的addWait被调用了")context.commit("Addmore",value)},500)}},//准备mutations——用于操作数组(state)mutations:{Addmore(state,value){console.log("mutations中的Addmore被调用了")state.sum+=value},Deduce(state,value){console.log("mutations中的Deduce被调用了")state.sum-=value},},//准备state——用于存储数组state:{sum:0,school:"幸福大学",subject:"计算机",},//准备getters——用于将state中的数据进行加工getters:{bigSum(state){return state.sum*10}}
}//人员相关的配置
const personOptions={namespaced:true,actions:{addPersonWang(context,value){if(value.name.indexOf("王")==0){context.commit("AddPerson",value)}else{alert("添加的必须是姓王的人!")}}},mutations:{AddPerson(state,value){state.personList.unshift(value)}},state:{personList:[{id:"001",name:"张三"}]},getters:{firstPersonName(state){return state.personList[0].name}}
}//创建并暴露store
export default new Vuex.Store({modules:{countAbout:countOptions,personAbout:personOptions}
})

Calculation.vue

Persons.vue

App.vue

请添加图片描述

发送Ajax请求处理并拆分store

在这里插入图片描述

请求

https://api.uixsj.cn/hitokoto/get?type=social
随机生成语录

src/store/personOptions.js

//人员相关的配置
import axios from "axios";
import {nanoid} from 'nanoid'
export default {namespaced:true,actions:{addPersonWang(context,value){if(value.name.indexOf("王")==0){context.commit("AddPerson",value)}else{alert("添加的必须是姓王的人!")}},addPerson(context){axios.get("https://api.uixsj.cn/hitokoto/get?type=social").then(response=>{context.commit("AddPerson",{id:nanoid(),name:response.data})},error=>{alert(error.message)})}},mutations:{AddPerson(state,value){state.personList.unshift(value)}},state:{personList:[{id:"001",name:"张三"}]},getters:{firstPersonName(state){return state.personList[0].name}}
}

src/store/countOptions.js

//求和相关的配置
const countOptions={namespaced:true,//准备actions——用于响应组件中的动作actions:{addOdd(context,value){if(context.state.sum%2){console.log("actions中的addOdd被调用了")context.commit("Addmore",value)}},addWait(context,value){setTimeout(()=>{console.log("actions中的addWait被调用了")context.commit("Addmore",value)},500)}},//准备mutations——用于操作数组(state)mutations:{Addmore(state,value){console.log("mutations中的Addmore被调用了")state.sum+=value},Deduce(state,value){console.log("mutations中的Deduce被调用了")state.sum-=value},},//准备state——用于存储数组state:{sum:0,school:"幸福大学",subject:"计算机",},//准备getters——用于将state中的数据进行加工getters:{bigSum(state){return state.sum*10}}
}
export default countOptions

main.js

import Vue from 'vue'import App from './App'
//引入vue-resource插件
import vueresource from 'vue-resource'//引入store
import store from './store'Vue.config.productionTip = false
//使用vue-resource插件
Vue.use(vueresource)new Vue({el: "#app",render: h => h(App),store,beforeCreate() {Vue.prototype.$bus = this}
})

src/store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)//引入
import countOptions from "@/store/countOptions";
import personOptions from "@/store/personOptions";//创建并暴露store
export default new Vuex.Store({modules:{countAbout:countOptions,personAbout:personOptions}
})

Persons.vue

Calculation.vue

App.vue

请添加图片描述

总结:模块化+命名空间

  1. 目的:让代码更好维护,让多种数据分类更加明确
  2. 修改store.js
const countAbout={namespaced:true,//开启命名空间state:{x},mutations:{...},actions:{...},getters:{bigSum(state){return state.sum*10}}
}const personAbout={namespaced:true,//开启命名空间state:{...},mutations:{...},actions:{...}
}const store=new Vuex.Store({modules:{countAbout,personAbout}
})
  1. 开启命名空间后,组件中读取state数据
//方式一:自己直接读取
this.$store.state.personAbout.list
//方式二:借助mapState读取
...mapState('countAbout',['sum','school','subject']),
  1. 开启命名空间后,组件中读取getters数据
//方式一:自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二:借助mapGetters读取
...mapGetters('countAbout',['bigSum']),
  1. 开启命名空间后,组件中调用dispatch
//方式一:自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二:借助mapActions读取
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
  1. 开启命名空间后,组件中调用commit
//方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二:借助mapMutations读取
...mapMutations('countAbout',{incrementOdd:'JIA',decrement:'JIAN'}),

相关内容

热门资讯

激发暑期文旅消费新动能   内蒙古阿尔山,漫步国家森林公园,感受清凉夏日;甘肃敦煌,坐在鸣沙山上,听一场星空演唱会;江苏连云...
日股收跌0.19% 格隆汇7月11日|日经225指数收盘下跌76.68点,跌幅0.19%,报39569.68点。
遵义小伙跳水救人牺牲,年仅31... (转自:遵义晚报)7月8日下午6时,遵义市播州区出现感人一幕——尚嵇镇大坝社区全军坝组28岁的村民陈...
“小记者”走进河北省邯郸市食品... 中国质量新闻网讯 7月7日下午,河北省邯郸市食品药品检验中心(市食品药品安全科普基地)联合邯郸新闻传...
局地超42℃!下周河南持续高温... 大范围高温闷热天气强势来袭!12日起,西太平洋副热带高压将再次控制我省,受其影响,13日至20日我省...
毕市监处罚[2025]1021... 毕市监处罚[2025]1021号浏览:1次基本信息:处罚机关毕节市市场监督管理局处罚日期2025年0...
达势股份-达美乐中国以4D战略...   达势股份-达美乐中国("达美乐中国"或"达势股份"或"公司")(1405.HK)是达美乐比萨在中...
“向上取整”:变相“明抢” 转自:中国质量报□ 胡立彪近日,有媒体对快递行业称重计费问题进行测评,结果发现,被测评的8家快递企业...
以改革破局 盐城经开区多点突破... 中新网江苏新闻7月11日电(倪玲)改革是发展的根本动力,开放是进步的必由之路。近年来,盐城经开区将推...
中国代表强调国际刑事法院应依法... 转自:千龙网新华社联合国7月10日电 中国常驻联合国副代表孙磊10日在安理会审议国际刑事法院涉苏丹问...