1.目的：为了让代码更好维护，让多种数据分类更加明确
2.修改src/store/index.js为了解决不同模块命名冲突的问题，将不同模块的namespaced:true，之后在不同页面中引入getter actions mutations state，需要加上所属的模块名
const countAbout={
namespaced:true,//开启命名空间
actions:{},
mutations:{},
state:{},
getters:{},
}
const personAbout={
namespaced:true,//开启命名空间
actions:{},
mutations:{},
state:{},
getters:{},
}
// 暴露/导出store
export default new Vuex.Store({
modules:[
countAbout,
personAbout
]
})3.开启命名空间后，组件中读取state数据
//方式一：自己直接读取
this.$store.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',{increment:'JIA',decrement:'JIAN'})
src/store/index.js
//引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import countOptions from './count'
import personOptions from './person'
// 暴露/导出store
export default new Vuex.Store({
modules: {
countAbout:countOptions,
personAbout:personOptions
}
})src/store/count.js
export default {
namespaced: true,//开启命名空间
actions: {
// context相当于精简版的$store
jiaOdd(context, value) {
console.log('actions中的jiaOdd被调用了');
if (context.state.sum % 2) {
context.commit('JIA', value)
}
},
jiaWait(context, value) {
console.log('actions中的jiaWait被调用了');
setTimeout(() => {
context.commit('JIA', value)
}, 500)
}
},
mutations: {
JIA(state, value) {
console.log('mutations中的JIA被调用了');
state.sum += value
},
JIAN(state, value) {
console.log('mutations中的JIAN被调用了');
state.sum -= value
}
},
state: {
sum: 0, //当前的和
school: '黑马',
subject: '前端',
},
getters: {
bigSum(state) {
return state.sum * 10
}
},
}src/store/person.js
import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
namespaced: true,//开启命名空间
actions: {
addPersonWang(context, value) {
if (value.name.indexOf('王') === 0) {
context.commit('ADD_PERSON', value)
} else {
alert('添加的人必须姓王！')
}
},
addPersonServer(context) {
axios.get('http://api.uixsj.cn/hitokoto/get?type=social').then(
response => {
context.commit('ADD_PERSON', { id: nanoid(), name: response.data })
},
error => {
alert(error.message)
}
)
}
},
mutations: {
ADD_PERSON(state, value) {
console.log('mutations中的ADD_PERSON被调用了');
state.personList.unshift(value)
}
},
state: {
personList: [{
id:'001',
name:'张三'
}]
},
getters: {
firstPersonName(state) {
return state.personList[0].name
}
},
}src/components/Count.vue
<template>
<div>
<h1>当前求和为：{{ sum }}</h1>
<h4 style="color:red">Person组件总人数为:{{ personList.length }}</h4>
<h1>当前求和放大10倍为：{{ bigSum }}</h1>
<h1>我在{{ school }}，学习{{ subject }}</h1>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</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,mapActions,mapMutations} from 'vuex'
export default {
name: 'Count',
data() {
return {
n: 1 //用户选择的数字
}
},
computed:{
...mapState('countAbout',['sum','school','subject']),
...mapState('personAbout',['personList']),
...mapGetters('countAbout',['bigSum'])
},
methods: {
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
}
}
</script>
<style>
button {
margin-left: 5px;
}
</style>
src/components/Person.vue
<template>
<div>
<h1>人员列表</h1>
<h4 style="color: red;">Count组件求和为：{{ sum }}</h4>
<h4>列表中第一个人的名字是：{{firstPersonName}}</h4>
<input type="text" placeholder="请输入名字" v-model="name">
<button @click="add">添加</button>
<button @click="addWang">添加一个姓王的人</button>
<button @click="addPerson">随机添加一个人</button>
<ul>
<li v-for="p in personList" :key="p.id">{{ p.name }}</li>
</ul>
</div>
</template>
<script>
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: {
add() {
if (this.name === '') return
const personObj = { id: nanoid(), name: this.name }
// console.log(personObj)
this.$store.commit('personAbout/ADD_PERSON', personObj)
this.name = ''
},
addWang(){
if (this.name === '') return
const personObj = { id: nanoid(), name: this.name }
// console.log(personObj)
this.$store.dispatch('personAbout/addPersonWang', personObj)
this.name = ''
},
addPerson(){
this.$store.dispatch('personAbout/addPersonServer')
}
}
}
</script>
src/App.vue
<template>
<div>
<Count/>
<hr>
<Person/>
</div>
</template>
<script>
import Count from './components/Count'
import Person from './components/Person'
export default {
name: 'App',
components: { Count,Person },
}
</script>
src/main.js
import Vue from 'vue'
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
import store from './store'
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)
//创建vm
new Vue({
el: '#app',
render: h => h(App),
store,
beforeCreate(){
Vue.prototype.$bus=this //安装全局事件总线
}
})
