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