HiDocs
Search K

Appearance

5. Vuex ​

5.1. 理解Vuex ​

5.1.1. Vuex是什么 ​

  1. 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的

    共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

  2. Vuex Github地址

1.如果用全局事件总线实现全局通讯 ​

全局通讯需求：让所有的组件对同一个数据实现都能读、都能写

A想发布数据，需要触发事件，触发其他所有组件绑定的同一个事件

A想修改某一个组件上面的数据，需要绑定事件，让其他组件触发这个事件

非常麻烦！！！

全局事件总线比较适合单方向的少量组件之间的通讯，数量多了就不好了！

img

2.如果用vuex实现全局通讯 ​

vuex是一个存放统一数据的仓库

每一个组件都可以和这个仓库实现双向的通讯！

img

5.1.2. 什么时候使用Vuex ​

官网：

  1. 多个组件依赖于同一状态（组件需要用同一个变量）
  2. 来自不同组件的行为需要变更同一状态（组件上面的事件操作的都是同一个变量）

这两句话用一个词总结：共享

5.1.3. Vuex工作原理图 ​

Vuex的三大部分：Actions、Mutations、State ——> 这三个部分需要store的统一管理

下面的所有函数都是store对象提供的！所以必须让所有的vc都能调用到store！

下面的所有对象是属于Vuex的！

Vue Components类似于客人，Actions类似于服务员，Mutations类似于后厨，State类似于做好的菜！store是饭店！

1.Vue Components：是一个对象，组件对象

2.Dispatch发送：是一个函数，有两个参数：动作类型、数据，将动作发送给Actions

3.Actions动作行为：是一个对象，一定有一个key和dispatch分发的动作类型相同，value值是一个x函数，在x函数里面调用Commit函数 ——>看似好像没什么用？

但是在这一层我们可以写一些公共的业务逻辑（提高代码的复用性），因为可能Dispatch发送的数据需要被判断或者进一步处理；（由内容耦合——>控制耦合，即解耦，为了更好地复用）

在这一层我们可以调用后端API，因为可能Dispatch发送的请求只有动作类型，没有数据，那么这个**数据可以通过ajax请求到后端去获取！**这就是Actions的作用！

4.Commit提交：是一个函数，在这个x函数里面我们自己调用commit函数，参数和Dispatch分发的还是一样，将动作发送给Mutations

5.Mutations转变：是一个对象，一定有一个key和dispatch分发的动作类型相同，value值是一个y函数，y函数有两个东西：state和传过来的数据，在这个函数里面用数据更新state（有对应的更新逻辑）——> 真正操作数据的人，浏览器的vuex开发者工具可以且仅可以看到关于Mutations的信息

6.Mutate加工：是一个函数，但是不用我们调用，底层会默认走这个函数

7.State状态：是一个对象，其实就是数据，这里会拿到更新后的state，然后重新解析那个组件对象

8.Render渲染：是一个函数，重新解析组件对象后，会调用这个函数重新渲染state数据到组件上面

注：因为有时确实Actions很多余，我们可能动作和数据都有，那么也可以直接在Vue Components中调用Commit函数，到Mutations中！——> 只是在图上没有体现出来

即：Dispatch —对应—> Actions（但是后面还要Commit）

而 Commit —对应—> Mutations

img

5.2. 求和案例 ​

下载vuex：npm i vuex

求和案例中，总和sum值是一个公共变量，应当被共享

5.2.1. 使用纯vue编写 ​

src/App.vue:

vue
<template>
	<div class="container">
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count}
	}
</script>

src/components/Count.vue:

vue
<template>
	<div>
		<h1>当前求和为：{{sum}}</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">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
				sum:0 //当前的和
			}
		},
		methods: {
			increment(){
				this.sum += this.n
			},
			decrement(){
				this.sum -= this.n
			},
			incrementOdd(){
				if(this.sum % 2){
					this.sum += this.n
				}
			},
			incrementWait(){
				setTimeout(()=>{
					this.sum += this.n
				},500)
			},
		},
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

效果：

img

5.2.2. 搭建Vuex环境 ​

步骤：

1.npm i vuex@3

vue2中只能用vuex3版本

vue3中只能用vuex4版本

但是npm i vuex现在默认安装的就是4版本

2.import Vuex from 'vuex'，Vue.use(Vuex)

使用Vuex

3.store

两种方式

（1）在src中创建vuex文件夹，然后新建store.js文件

（2）官方推荐：在src中创建store文件夹，然后新建index.js文件

export default暴露store

4.vc ==> store

use了Vuex，那么在new Vue时就可以传入一个store配置项

这样vm和所有的vc就都拥有$store这个属性了！

代码：

  1. 下载 Vuex：npm i vuex
  2. 创建src/store/index.js：
js
//引入Vue核心库：要不然没法Vue.use()
import Vue from 'vue'
//引入Vuex：只需要在这引入了
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作、处理业务逻辑
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
   
//创建并默认暴露store
export default new Vuex.Store({
   	actions, //这是简写形式，完整写法为actions:actions,
   	mutations,
   	state
})
  1. 在src/main.js中创建 vm 时传入store配置项：
js
import Vue from 'vue'
import App from './App.vue'
import store from './store' //引入store，如果文件名为index.js则可以省略掉
//注：ES6中，不管import语句写在哪里了，都是最先于所有代码执行！

Vue.config.productionTip = false

new Vue({
   
    el:"#app",
    render: h => h(App),
    store //配置store
})

5.2.3. 使用Vuex编写 ​

src/components/Count.vue:

vue
<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</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">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.commit('ADD',this.n)
			},
			decrement(){
				this.$store.commit('SUBTRACT',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('addOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('addWait',this.n)
			},
		},
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

src/store/index.js:

actions和mutations中的函数都在index.js中进行定义：

js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {
   
    addOdd(context,value){ //奇数才加
   
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){ //利用上下文拿到state作判断
   
            context.commit('ADD',value)
        }
    },
    addWait(context,value){ //延时加
   
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{
   
			context.commit('ADD',value)
		},500)
    },
}
//准备mutations对象——修改state中的数据
const mutations = {
   
    ADD(state,value){ //普通的加
   
        state.sum += value
    },
    SUBTRACT(state,value){ //普通的减
   
        state.sum -= value
    }
}
//准备state对象——保存具体的数据
const state = {
   
    sum:0 //当前的和
}
   
//创建并暴露store
export default new Vuex.Store({
   
    actions,
    mutations,
    state
})

总结：

Vuex的基本使用：

  1. 初始化数据state，配置actions、mutations，操作文件store.js
js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

注意：actions内的函数的context参数有什么作用？

context是上下文的意思，包含了dispatch、commit函数，和state对象，也就是说我们可以利用这些d东西再进行一系列的业务操作，尤其是可以利用dispatch将请求再转发给别的actions内的函数，就相当于给一个客人准备了好几个服务员，针对复杂逻辑更方便！

  1. 组件中读取vuex中的数据：$store.state.sum
  2. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

备注：若没有网络请求（请求后端api）或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit（因为mutations才是真正去操作state数据的）

5.3. getters配置项 ​

src/Count.vue:

vue
<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<h3>当前求和的10倍为：{{$store.getters.bigSum}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.commit('ADD',this.n)
			},
			decrement(){
				this.$store.commit('SUBTRACT',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('addOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('addWait',this.n)
			},
		},
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

src/store/index.js:

js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {
   
    addOdd(context,value){
   
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){
   
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
   
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{
   
			context.commit('ADD',value)
		},500)
    },
}
//准备mutations对象——修改state中的数据
const mutations = {
   
    ADD(state,value){
   
        state.sum += value
    },
    SUBTRACT(state,value){
   
        state.sum -= value
    }
}
//准备state对象——保存具体的数据
const state = {
   
    sum:0 //当前的和
}
//准备getters对象——用于将state中的数据进行加工
const getters = {
   
    bigSum(){
   
        return state.sum * 10
    }
}
   
//创建并暴露store
export default new Vuex.Store({
   
    actions,
    mutations,
    state,
    getters //添加getters
})

效果：

img

总结：

getters配置项的使用：

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters对象中的函数进行加工
  2. 在store.js中追加getters配置
js
...
const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	...
	getters
})
  1. 组件中读取数据：$store.getters.bigSum

5.4. 四个map方法的使用 ​

5.4.1. mapState与mapGetters ​

src/store/index.js:

js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {
   
    addOdd(context,value){
   
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){
   
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
   
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{
   
			context.commit('ADD',value)
		},500)
    },
}
//准备mutations对象——修改state中的数据
const mutations = {
   
    ADD(state,value){
   
        state.sum += value
    },
    SUBTRACT(state,value){
   
        state.sum -= value
    }
}
//准备state对象——保存具体的数据
const state = {
   
    sum:0, //当前的和
    name:'JOJO',
    school:'尚硅谷',
}
//准备getters对象——用于将state中的数据进行加工
const getters = {
   
    bigSum(){
   
        return state.sum * 10
    }
}
   
//创建并暴露store
export default new Vuex.Store({
   
    actions,
    mutations,
    state,
    getters
})

src/components/Count.vue:

vue
<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和的10倍为：{{bigSum}}</h3>
		<h3>我是{{name}}，我在{{school}}学习</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters} from 'vuex' //引入两个方法

	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.commit('ADD',this.n)
			},
			decrement(){
				this.$store.commit('SUBTRACT',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('addOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('addWait',this.n)
			},
		},
		computed:{		
			// 借助mapState生成计算属性（数组写法）
			// ...mapState(['sum','school','name']),
			// 借助mapState生成计算属性（对象写法）
			...mapState({sum:'sum',school:'school',name:'name'}), //属性名

			...mapGetters(['bigSum']) //方法名
		}
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

效果：

img

总结：

  1. mapState方法：用于帮助我们映射state中的数据，这样就不需要$store.state.属性了（要不然要写很多的重复的$store.state.）

...mapState前面的...的作用：这是ES6中的扩展运算符，能够实现在对象里面写对象，相当于把里面的对象的k-value加到外面的对象内作为一部分！

mapState本质是函数，但是返回值是对象！

js
computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
    //对象写法的好处：可以给属性重命名！
    ...mapState({jia:'sum',xuexiao:'school',subject:'subject'}),
    //不然要这样写：麻烦
    //sum(){ return this.$store.state.sum }
    //school(){ return this.$store.state.school }
    //subject(){ return this.$store.state.subject }
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},
  1. mapGetters方法：用于帮助我们映射getters中的数据，这样就不需要$store.getters.属性了！
js
computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum']),
},

5.4.2. mapActions与mapMutations ​

src/components/Count.vue:

vue
<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和的10倍为：{{bigSum}}</h3>
		<h3>我是{{name}}，我在{{school}}学习</h3>
		<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,mapMutations,mapActions} from 'vuex'

	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			// 借助mapActions生成：increment、decrement（对象形式）
			...mapMutations({increment:'ADD',decrement:'SUBTRACT'}),

			// 借助mapActions生成：incrementOdd、incrementWait（对象形式）
			...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})
		},
		computed:{		
			// 借助mapState生成计算属性（数组写法）
			// ...mapState(['sum','school','name']),
			// 借助mapState生成计算属性（对象写法）
			...mapState({sum:'sum',school:'school',name:'name'}),

			...mapGetters(['bigSum'])
		}
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

总结：

形式为 函数名：'动作名'

数据在绑定函数时就传入了 @事件="函数(参数值)"

  1. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数，不用再写this.$store.dispatch('动作',数据)
js
methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}
  1. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数，不用再写this.$store.commit('动作',数据)
js
methods:{
    //靠mapMutations生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数，则需要在html模板中绑定事件时就传递好参数，否则参数是事件对象！

5.5. 多组件共享数据案例 ​

综合应用了上面所述的技术！

src/App.vue:

vue
<template>
	<div class="container">
		<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/store/index.js:

js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {
   
    addOdd(context,value){
   
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){
   
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
   
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{
   
			context.commit('ADD',value)
		},500)
    },
}
//准备mutations对象——修改state中的数据
const mutations = {
   
    ADD(state,value){
   
        state.sum += value
    },
    SUBTRACT(state,value){
   
        state.sum -= value
    },
	ADD_PERSON(state,value){
   
		console.log('mutations中的ADD_PERSON被调用了')
		state.personList.unshift(value)
	}
}
//准备state对象——保存具体的数据
const state = {
   
    sum:0, //当前的和
    name:'JOJO',
    school:'尚硅谷',
    personList:[
		{id:'001',name:'JOJO'}
	]
}
//准备getters对象——用于将state中的数据进行加工
const getters = {
   
    bigSum(){
   
        return state.sum * 10
    }
}
   
//创建并暴露store
export default new Vuex.Store({
   
    actions,
    mutations,
    state,
    getters
})

src/components/Count.vue:

vue
<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和的10倍为：{{bigSum}}</h3>
		<h3>我是{{name}}，我在{{school}}学习</h3>
		<h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
		<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,mapMutations,mapActions} from 'vuex'

	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			...mapMutations({increment:'ADD',decrement:'SUBTRACT'}),
			...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})
		},
		computed:{
			...mapState(['sum','school','name','personList']),,
			...mapGetters(['bigSum'])
		}
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

src/components/Person.vue:

vue
<template>
	<div>
		<h1>人员列表</h1>
		<h3 style="color:red">Count组件求和为：{{sum}}</h3>
		<input type="text" placeholder="请输入名字" v-model="name">
		<button @click="add">添加</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:{
            //不使用mapState，自己计算也可以！
			personList(){
				return this.$store.state.personList
			},
			sum(){
				return this.$store.state.sum
			}
		},
		methods: {
			add(){
				const personObj = {id:nanoid(),name:this.name}
				this.$store.commit('ADD_PERSON',personObj)
				this.name = ''
			}
		}
	}
</script>

效果：

img

5.6. 模块化+命名空间 ​

概述：其实就是把js文件模块化了，并且每个模块有一个专门的命名空间，在进行方法调用和mapState等操作时都必须指明命名空间！

不同的模块之间不能通讯，state和actions等都是互相隔离的！

src/store/index.js:

js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引入count
import countOptions from './count' //.js和.vue文件都可以不加后缀！
//引入person
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)
   
//创建并暴露store
export default new Vuex.Store({
   
    modules:{
   		//命名空间名1：模块名1
        countAbout:countOptions,
        //命名空间名2：模块名2
        personAbout:personOptions,
    }
})

src/store/count.js:

js
export default{
   
    namespaced:true, //开启命名空间
    actions:{
   
        addOdd(context,value){
   
            console.log("actions中的addOdd被调用了")
            if(context.state.sum % 2){
   
                context.commit('ADD',value)
            }
        },
        addWait(context,value){
   
            console.log("actions中的addWait被调用了")
            setTimeout(()=>{
   
                context.commit('ADD',value)
            },500)
        }
    },
    mutations:{
   
        ADD(state,value){
   
            state.sum += value
        },
        SUBTRACT(state,value){
   
            state.sum -= value
        }
    },
    state:{
   
        sum:0, //当前的和
        name:'JOJO',
        school:'尚硅谷',
    },
    getters:{
   
        bigSum(state){
   
            return state.sum * 10
        }
    }
}

src/store/person.js:

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){
   			//http://api.uixsj.cn/hitokoto/get?type=social是一个快捷生成语句的免费api
            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:'JOJO'}
        ]
    },
    getters:{
   
        firstPersonName(state){
   
            return state.personList[0].name
        }
    }
}

src/components/Count.vue:

vue
<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和的10倍为：{{bigSum}}</h3>
		<h3>我是{{name}}，我在{{school}}学习</h3>
		<h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
		<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,mapMutations,mapActions} from 'vuex'

	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
            //指明命名空间
			...mapMutations('countAbout',{increment:'ADD',decrement:'SUBTRACT'}),
			...mapActions('countAbout',{incrementOdd:'addOdd',incrementWait:'addWait'})
		},
		computed:{
            //指明命名空间：这样state和getters的方式是统一的，不容易出错，所以推荐用这个map方法！
			...mapState('countAbout',['sum','school','name']),
			...mapGetters('countAbout',['bigSum']),
			...mapState('personAbout',['personList'])
		}
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

src/components/Person.vue:

vue
<template>
	<div>
		<h1>人员列表</h1>
		<h3 style="color:red">Count组件求和为：{{sum}}</h3>
        <h3>列表中第一个人的名字是：{{firstPersonName}}</h3>
		<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(){
                 //state指明命名空间
				return this.$store.state.countAbout.sum
			},
            firstPersonName(){
                //getters指明命名空间
                return this.$store.getters['personAbout/firstPersonName']
            }
		},
		methods: {
			add(){
				const personObj = {id:nanoid(),name:this.name}
                 //commit/dispatch指明命名空间
				this.$store.commit('personAbout/ADD_PERSON',personObj)
				this.name = ''
			},
            addWang(){
                const personObj = {id:nanoid(),name:this.name}
				this.$store.dispatch('personAbout/addPersonWang',personObj)
				this.name = ''   
            },
            addPerson(){
                this.$store.dispatch('personAbout/addPersonServer')
            }
		},
	}
</script>

效果：

img

总结：

模块化 + 命名空间：

  1. 目的：让代码更好维护，让多种数据分类更加明确（同一类别的操作放在同一个模块下）
  2. 修改store.js：
js
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
  	}
})
  1. 开启命名空间后，组件中读取state数据：
js
//方式一：自己直接读取，必须用.
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),
  1. 开启命名空间后，组件中读取getters数据：
js
//方式一：自己直接读取，必须用/
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])
  1. 开启命名空间后，组件中调用dispatch：
js
//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
  1. 开启命名空间后，组件中调用commit：
js
//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),