vue--day76--vuex 模块化+命名空间
7.模块化+命名空间
1. 目的：让代码更好维护，让多种数据分类更加明确。
2. 修改```store.js```
```javascript
const countAbout = {
namespaced:true,//开启命名空间
state:{x:1},
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数据：
```js
//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),
```
4. 开启命名空间后，组件中读取getters数据：
```js
//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])
```
5. 开启命名空间后，组件中调用dispatch
```js
//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
```
6. 开启命名空间后，组件中调用commit
```js
//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
```
1. store/person.js
import axios from "axios";
import { nanoid } from "nanoid";
export default{
namespaced:true,
actions:{
addPersonWang(conext,value){
if(value.name.indexOf('王')==0){
conext.commit('ADD_PERSON',value);
}
},
addPersonServer(conext){
axios.get('https://v.api.aa1.cn/api/pyq/index.php?aa1=json').then(
response =>{
conext.commit('ADD_PERSON',{id:nanoid,name:response.data.pyq})
},
error =>{
alert(error.message);
}
)
}
},
mutations:{
ADD_PERSON(state,value){
console.log("mutations里面的ADD_PERSON被调用了",state,value)
state.personList.unshift(value)
}
},
state:{
personList:[{id:'1',name:'李四'}]
},
getters:{
firstPersonName(state){
return state.personList[0].name
}
}
}
2. store/count.js
// 求和的相关配置
export default{
namespaced:true,
actions:{
incrementOdd(conext,value){
//console.log("actions里面的incrementOdd被调用了",conext,value)
if(conext.state.sum%2){
conext.commit('JIA',value)
}
},
incrementWait(conext,value){
//console.log("actions里面的incrementWait被调用了",conext,value)
setTimeout(() => {
conext.commit('JIA',value)
}, 500);
},
},
mutations:{
JIA(state,value){
//console.log("mutations里面的jia被调用了",state,value)
state.sum+=value
},
JIAN(state,value){
//console.log("mutations里面的jian被调用了",state,value)
state.sum-=value
},
},
state:{
sum:0,
school:"尚硅谷",
subject:"前端",
},
getters:{
bigSum(state){
return state.sum * 10
}
}
}
3. store/index.js
//改文件用于创建vuex 最为核心的 store
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
Vue.use(Vuex)
// 创建store 暴露store
export default new Vuex.Store({
modules:{
countAbout:countOptions,
personAbout:personOptions
}
})
4. Person.vue
<template>
<div>
<h1>人员列表</h1>
<h1 style="color: red;">Count 组件的求和为{{ sum }}</h1>
<h1>列表中的第一个名字是:{{ firstPersonName }}</h1>
<input type="text" placeholder="请输入名字" v-model="name"><button @click="addPerson">添加</button>
<button @click="addPersonWang">添加王</button>
<button @click="addPersonServer">添加一个随机的名字</button>
<ul v-for="p in personList" :key="p.id">
<li>{{ p.name }}</li>
</ul>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { nanoid } from 'nanoid'
export default {
name:'Person',
data(){
return {
name:""
}
},
computed:{
personList(){
return this.$store.state.personAbout.personList
},
sum(){
return this.$store.state.countAbout.sum
},
firstPersonName(){
return this.$store.getters['personAbout/firstPersonName']
}
},
methods:{
addPerson(){
const personObj={id:nanoid(),name:this.name}
console.log(personObj)
this.$store.commit('personAbout/ADD_PERSON',personObj)
this.name='';
},
addPersonWang(){
const personObj={id:nanoid(),name:this.name}
console.log(personObj)
this.$store.dispatch('personAbout/addPersonWang',personObj)
this.name='';
},
addPersonServer(){
this.$store.dispatch('personAbout/addPersonServer')
}
}
}
</script>
<style>
</style>
5. Count.vue
<template>
<div>
<h1>当前求和位{{ sum}}</h1>
<h1>当前求和放大10倍后是{{ bigSum }}</h1>
<h1>我在{{school }},学习{{ subject }}</h1>
<h3 style="color: red;">PersonList 组件的总人数是{{ personList.length }}</h3>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button @click="increment(n)">+</button>
<button @click="decrement(n)">-</button>
<button @click="incrementOdd(n)">当前和为奇数在加</button>
<button @click="incrementWait(n)">等一等在加</button>
</div>
</template>
<script>
import { mapState ,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
name:'Count',
data(){
return {
n:1,
}
},
computed:{
// 靠程序员自己去写计算属性
// qiuhe(){
// return this.$store.state.sum
// },
// xuexiao(){
// return this.$store.state.school
// },
// xueke(){
// return this.$store.state.subject
// }
//借助mapState 生成计算属性从 state 中读取数据 对象写法
//...mapState({sum:'sum',school:'school',subject:'subject'})
//借助mapState 生成计算属性从 state 中读取数据 数组写法
...mapState('countAbout',['sum','school','subject']),
...mapState('personAbout',['personList']),
//借助mapGetters 生成计算属性从 state 中读取数据 对象写法
//...mapGetters({bigSum:'bigSum'})
//借助mapGetters 生成计算属性从 state 中读取数据 数组写法
...mapGetters('countAbout',['bigSum']),
},
mounted(){
console.log('countvue',this)
},
methods:{
// 程序猿亲自写方法
// increment(){
// //this.$store.dispatch('jia',this.n)
// this.$store.commit('JIA',this.n)
// },
// decrement(){
// //this.$store.dispatch('jian',this.n)
// this.$store.commit('JIAN',this.n)
// },
//mapMutations 生成对应的方法防 方法中会调用commit去联系mutations 对象写法
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
//mapMutations 生成对应的方法防 方法中会调用commit去联系mutations 数组写法
//...mapMutations({'JIA','JIAN'})
// incrementOdd(){
// this.$store.dispatch('incrementOdd',this.n)
// },
// incrementWait(){
// this.$store.dispatch('incrementWait',this.n)
// }
// 借助mapActions 生成对应的方法，方法中会调用dispatch 方法去联系actions 对象写法
//...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'}),
// 借助mapActions 生成对应的方法，方法中会调用dispatch 方法去联系actions 数组写法
...mapActions('countAbout',['incrementOdd','incrementWait'])
}
}
</script>
<style>
button{
margin-left: 10px;
}
</style>
6. App.vue
<template>
<div>
<Count></Count>
<hr>
<Person></Person>
</div>
</template>
<script>
import Count from './components/Count.vue';
import Person from './components/Person.vue';
export default {
name: 'App',
components:{
Count,
Person
},
mounted(){
console.log('store',this.$store)
console.log('appvue',this)
}
}
</script>
<style>
</style>
9. main.js
/**
* 该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
// 引入App 组件 他是所有组件的父组件
import App from './App.vue'
//import store from './store/index.js'
// index.js 默认加载
import store from './store'
//关闭vue 的生产提示
Vue.config.productionTip = false
// const Demo=Vue.extend({})
// const d=new Demo();
// Vue.prototype.x=d;
// 创建Vue 实例对象--vm
new Vue({
//将 app 组件放入到容器中
render: h => h(App),
store,
beforeCreate(){
Vue.prototype.$bus=this // 安装全局事件总监
}
}).$mount('#app')