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}
})

3. 开启命名空间后，组件中读取state数据

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取
...mapState('countAbout',['sum','school','subject']),

4. 开启命名空间后，组件中读取getters数据

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取
...mapGetters('countAbout',['bigSum']),

5. 开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions读取
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),

6. 开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations读取
...mapMutations('countAbout',{incrementOdd:'JIA',decrement:'JIAN'}),