12-Vue技术栈之Vuex的使用

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

目录

1、理解 vuex

1.1 vuex 是什么

  1. 概念专门在 Vue 中实现集中式状态数据管理的一个 Vue 插件对 vue 应用中多个组件的共享状态进行集中式的管理读/写也是一种组件间通信的方式且适用于任意组件间通信。
  2. Github 地址: https://github.com/vuejs/vuex

1.2 什么时候使用 Vue

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

简单来说就是多个组件需要共享数据时

1.3 图解两种方式实现数据共享

  • 使用全局事件总线实现多组件共享数据较为麻烦。

请添加图片描述

  • 使用Vuex实现多组件共享数据简便。

请添加图片描述

2、搭建vuex环境

2.1 下载vuex

npm i vuex

在这里插入图片描述

注
如果执行npm i vuex默认安装的是vuex4版本而vuex4版本只能在vue3里面使用所以如果你用的是vue2需要指定安装vuex3的版本。

vue2里正确安装

npm i vuex@3

2.2 配置文件

  1. 创建文件src/store/index.js
//引入Vue核心库
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,
	mutations,
	state
})
  1. 在main.js中创建vm时传入store配置项
......
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入store
import store from './store/index.js'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

3、基本使用

  • vuex工作原理图

在这里插入图片描述

  1. 初始化数据、配置actions、配置mutations操作文件store.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,
})

  1. 组件中读取vuex中的数据$store.state.sum

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

    备注若没有网络请求或其他业务逻辑组件中也可以越过actions即不写dispatch直接编写commit

3.1 求和案例纯vue写法

  • 我们来用纯Vue写一个案例在用vuex重新书写一遍形成一个对比。

实现效果

请添加图片描述
结构目录
在这里插入图片描述

代码示例
main 文件

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
 new Vue({
  render: h => h(App),
}).$mount('#app')

App组件

<template>
  <Count/>
</template>

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

<style>

</style>

Count组件

<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="add">+</button>
    <button @click="subtract">-</button>
    <button @click="addOdd">当前和为奇数再加</button>
    <button @click="addWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1, //选择数
      sum: 0, //求和数
    };
  },
  methods: {
    add() {
      this.sum += this.n;
    },
    subtract() {
      this.sum -= this.n;
    },
    addOdd() {
      if (this.sum % 2) {
        this.sum += this.n;
      }
    },
    addWait() {
      setTimeout(() => {
        this.sum += this.n;
      }, 500);
    },
  },
};
</script>

<style>
h1 {
  color: pink;
}
select {
  width: 50px;
  background: pink;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background: pink;
  border: none;
  cursor: pointer;
}
</style>

3.2 求和案例vuex写法

实现效果

请添加图片描述
结构目录

在这里插入图片描述
main文件

import Vue from 'vue'
import App from './App.vue'
//引入store里面的index.js文件vue里默认引入的就是index文件
import store from './store'
Vue.config.productionTip = false
const vm = new Vue({
  render: h => h(App),
  store //安装store
}).$mount('#app')
console.log(vm);

App组件

<template>
  <Count/>
</template>

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

</style>

Count组件

<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="add">+</button>
    <button @click="subtract">-</button>
    <button @click="addOdd">当前和为奇数再加</button>
    <button @click="addWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1, //选择数
    };
  },
  methods: {
    add() {
      this.$store.commit("ADD", this.n);
    },
    subtract() {
      this.$store.commit("SUBTRACT", this.n);
    },
    addOdd() {
      this.$store.dispatch("addOdd", this.n);
    },
    addWait() {
      this.$store.dispatch("addWait", this.n);
    },
  },
};
</script>

<style>
h1 {
  color: pink;
}
select {
  width: 50px;
  background: pink;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background: pink;
  border: none;
  cursor: pointer;
}
</style>

store里面的index.js 文件

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {
	addOdd(context, value) {
		if (context.state.sum % 2) {
			context.commit('ADD', value)
		};
	},
	addWait(context, value) {
		setTimeout(() => {
			context.commit('ADD', value)
		}, 500);
	}
}
//准备mutations对象——修改state中的数据
const mutations = {
	ADD(context, value) {
		context.sum += value
	},
	SUBTRACT(context, value) {
		context.sum -= value
	},

}
//准备state对象——保存具体的数据
const state = {
	sum: 0, //求和数
}

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

4、getters的使用

  1. 概念当state中的数据需要经过加工后再使用时可以使用getters加工。

  2. 在store.js中追加getters配置

    ......

const getters = {
	bigSum(state){
		return state.sum * 10
		//靠返回值
	}
}

//创建并暴露store
export default new Vuex.Store({
	......
	getters
})

  3. 组件中读取数据$store.getters.bigSum

5、四个map方法的使用

  1. mapState方法用于帮助我们映射state中的数据为计算属性
computed: {
    //借助mapState生成计算属性sum、school、subject对象写法
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性sum、school、subject数组写法
    ...mapState(['sum','school','subject']),
},
  1. mapGetters方法用于帮助我们映射getters中的数据为计算属性
computed: {
    //借助mapGetters生成计算属性bigSum对象写法
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性bigSum数组写法
    ...mapGetters(['bigSum'])
},
  1. mapActions方法用于帮助我们生成与actions对话的方法即包含$store.dispatch(xxx)的函数
methods:{
    //靠mapActions生成incrementOdd、incrementWait对象形式
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

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

备注在四个方法使用时若需要传递参数需要在模板中绑定事件时传递好参数否则参数是事件对象。

5.1 求和案例

  • 我们将上面的求和案例利用这些方法进行改进一下:
  • 其他文件照常只改变store里面的index.js和Count组件
    index.js文件
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {
	/* add(context, value) {
		context.commit('ADD', value)
	},
	subtract(context, value) {
		context.commit('SUBTRACT', value)
	}, */
	addOdd(context, value) {
		if (context.state.sum % 2) {
			context.commit('ADD', value)
		};
	},
	addWait(context, value) {
		setTimeout(() => {
			context.commit('ADD', value)
		}, 500);
	}
}
//准备mutations对象——修改state中的数据
const mutations = {
	ADD(context, value) {
		context.sum += value
	},
	SUBTRACT(context, value) {
		context.sum -= value
	},

}
//准备state对象——保存具体的数据
const state = {
	sum: 0, //求和数
	school:'哔站',
	subject:'前端'
}
// 对state对象里的数据进行加工
const getters = {
	bigSum(state) {
		return state.sum * 10
	}
}

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

Count组件

<template>
  <div>
    <h1>当前求和为{{ sum }}</h1>
    <h3>放大十倍后的和为{{ bigSum }}</h3>
    <h3>我在{{ school }}学{{ subject }}</h3>

    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add(n)">+</button>
    <button @click="subtract(n)">-</button>
    <button @click="addOdd(n)">当前和为奇数再加</button>
    <button @click="addWait(n)">等一等再加</button>
  </div>
</template>

<script>
// 导入4个map方法
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1, //选择数
    };
  },
  computed: {
    //靠程序员自己亲自去写计算属性
    /* sum(){
				return this.$store.state.sum
			},
			school(){
				return this.$store.state.school
			},
			subject(){
				return this.$store.state.subject
			}, */

    //借助mapState生成计算属性从state中读取数据。对象写法
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
    //借助mapState生成计算属性从state中读取数据。数组写法
    // 数组写法必须数据名和计算方法名一致
    ...mapState(["sum", "school", "subject"]),
    // ...............................
    //靠程序员自己亲自去写计算属性
    /* bigSum(){
				return this.$store.getters.bigSum
			}, */
    //借助mapGetters生成计算属性从getters中读取数据。对象写法
    // ...mapGetters({bigSum:'bigSum'})
    //借助mapGetters生成计算属性从getters中读取数据。数组写法
    ...mapGetters(["bigSum"]),
  },
  methods: {
    //程序员亲自写方法
    /*   add() {
      this.$store.commit("ADD", this.n);
    },
    subtract() {
      this.$store.commit("SUBTRACT", this.n);
    },
    addOdd() {
      this.$store.dispatch("addOdd", this.n);
    },
    addWait() {
      this.$store.dispatch("addWait", this.n);
    }, */

    //借助mapMutations生成对应的方法方法中会调用commit去联系mutations(对象写法)
    ...mapMutations({ add: "ADD", subtract: "SUBTRACT" }), //必须在插值语法中传入实参不然默认是event事件对象
    //借助mapMutations生成对应的方法方法中会调用commit去联系mutations(数组写法)数组写法必须数据名和方法名一致这里改了上面调用的时候也要改。
    // ...mapMutations({ADD:'ADD',SUBTRACT:'SUBTRACT'})

    //借助mapActions生成对应的方法方法中会调用dispatch去联系actions(对象写法)
    // ...mapActions({addOdd:'addOdd',addWait:'addWait'})
    //借助mapActions生成对应的方法方法中会调用dispatch去联系actions(数组写法)
    ...mapActions(["addOdd", "addWait"]),
  },
};
</script>

<style>
h1,
h3 {
  color: pink;
}
select {
  width: 50px;
  background: pink;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background: pink;
  border: none;
  cursor: pointer;
}
</style>

6、 模块化+命名空间

  • 目的让代码更好维护让多种数据分类更加明确。

  • 修改store.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
  }
})

  • 开启命名空间后组件中读取state数据

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

  • 开启命名空间后组件中读取getters数据

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

  • 开启命名空间后组件中调用dispatch

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

  • 开启命名空间后组件中调用commit

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

6.1求和案例改造

  • 实现效果

请添加图片描述

  • 结构目录

在这里插入图片描述
main文件

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

 new Vue({
  render: h => h(App),
  store
}).$mount('#app')

App组件

<template>
  <div>
    <Count />
    <Person />
  </div>
</template>

<script>
import Count from "./components/Count";
import Person from "./components/Person";
export default {
  name: "App",
  components: { Count, Person },
};
</script>
<style>
</style>

Count组件使用4种map方法

<template>
  <div>
    <h1>当前求和为{{ sum }}</h1>
    <h3>放大十倍后的和为{{ bigSum }}</h3>
    <h3>我在{{ school }}学{{ subject }}</h3>
    <h3 style="color: red">Person组件的总人数是{{ persons.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="add(n)">+</button>
    <button @click="subtract(n)">-</button>
    <button @click="addOdd(n)">当前和为奇数再加</button>
    <button @click="addWait(n)">等一等再加</button>
  </div>
</template>

<script>
// 导入4个map方法
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  computed: {
    //借助mapState生成计算属性从state中读取数据。数组写法
    ...mapState('CountOptions',["sum", "school", "subject"]),
    ...mapState('PersonOptions',["persons"]),
    //借助mapGetters生成计算属性从getters中读取数据。数组写法
    ...mapGetters('CountOptions',["bigSum"]),
  },
  methods: {
    //借助mapMutations生成对应的方法方法中会调用commit去联系mutations(对象写法)
    ...mapMutations('CountOptions',{ add: "ADD", subtract: "SUBTRACT" }),
    //借助mapActions生成对应的方法方法中会调用dispatch去联系actions(对象写法)
    ...mapActions('CountOptions',["addOdd", "addWait"]),
  },
};
</script>

<style>
h1,
h3,
li {
  color: pink;
}
select {
  width: 50px;
  background: pink;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background: pink;
  border: none;
  cursor: pointer;
}
</style>

Person组件不使用map方法和上面的写法进行一个对比

<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="addZhang">添加一个姓张的人</button>
    <button @click="addPersonServer">随机添加一条语录</button>

    <ul>
      <li v-for="p in persons" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: "",
    };
  },
  computed: {
    persons() {
      //   return this.$store.state.persons
      return this.$store.state.PersonOptions.persons;
    },
    sum() {
      return this.$store.state.CountOptions.sum;
    },
    firstPersonName() {
      return this.$store.getters["PersonOptions/firstPersonName"];
    },
  },
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.commit("PersonOptions/PersonAdd", personObj);
    },
    addZhang() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.dispatch("PersonOptions/addZhang", personObj);
    },
    addPersonServer() {
        this.$store.dispatch('PersonOptions/addPersonServer')
    }
  },
  mounted() {
    console.log(this.$store);
  },
};
</script>

<style>
input::placeholder {
  color: pink;
}
input {
  border: 1px solid pink;
  padding: 5px;
}
</style>

store/index.js文件

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import axios from 'axios'
import { nanoid } from 'nanoid'
//应用Vuex插件
Vue.use(Vuex)

const CountOptions = {
	namespaced: true,
	actions: {
		addOdd(context, value) {
			if (context.state.sum % 2) {
				context.commit('ADD', value)
			};
		},
		addWait(context, value) {
			setTimeout(() => {
				context.commit('ADD', value)
			}, 500);
		}
	},
	mutations: {
		ADD(state, value) {

			state.sum += value
		},
		SUBTRACT(state, value) {
			state.sum -= value
		},
	},
	state: {
		sum: 0, //求和数
		school: '哔站',
		subject: '前端',
	},
	getters: {
		bigSum(state) {
			return state.sum * 10
		}
	}
}
const PersonOptions = {
	namespaced: true,
	actions: {
		addZhang(context, value) {
			if (value.name.indexOf('张') === 0) {
				context.commit('PersonAdd', value)
			} else { alert('请输入姓张的人') }
		},
		addPersonServer(context) {
			axios({
				methods: 'get',
				url: 'https://api.uixsj.cn/hitokoto/get?type=social'
			}).then(response => {
				context.commit('PersonAdd', { id: nanoid(), name: response.data })
			}, error => { 
				alert(error.message)
			})
		}
	},
	mutations: {
		PersonAdd(state, value) {
			state.persons.unshift(value)
		}
	},
	state: {
		persons: [{ id: "001", name: '张三' }]
	},
	getters: {
		firstPersonName(state) {
			return state.persons[0].name
		}
	}
}

//创建并暴露store
export default new Vuex.Store({
	modules: {
		CountOptions,
		PersonOptions
	}
})

对store/index.js文件进行拆分

  • 目录结构
    在这里插入图片描述
    index.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'


import CountOptions from './CountOptions'
import PersonOptions from './PersonOptions'
//应用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
	modules: {
		CountOptions,
		PersonOptions
	}
})

CountOptions.js

export default {
	namespaced: true,
	actions: {
		addOdd(context, value) {
			if (context.state.sum % 2) {
				context.commit('ADD', value)
			};
		},
		addWait(context, value) {
			setTimeout(() => {
				context.commit('ADD', value)
			}, 500);
		}
	},
	mutations: {
		ADD(state, value) {

			state.sum += value
		},
		SUBTRACT(state, value) {
			state.sum -= value
		},
	},
	state: {
		sum: 0, //求和数
		school: '哔站',
		subject: '前端',
	},
	getters: {
		bigSum(state) {
			return state.sum * 10
		}
	}
}

PersonOptions.js

import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
    namespaced: true,
    actions: {
        addZhang(context, value) {
            if (value.name.indexOf('张') === 0) {
                context.commit('PersonAdd', value)
            } else { alert('请输入姓张的人') }
        },
        addPersonServer(context) {
            axios({
                methods: 'get',
                url: 'https://api.uixsj.cn/hitokoto/get?type=social'
            }).then(response => {
                context.commit('PersonAdd', { id: nanoid(), name: response.data })
            }, error => {
                alert(error.message)
            })
        }
    },
    mutations: {
        PersonAdd(state, value) {
            state.persons.unshift(value)
        }
    },
    state: {
        persons: [{ id: "001", name: '张三' }]
    },
    getters: {
        firstPersonName(state) {
            return state.persons[0].name
        }
    }
}
阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: vue
返回列表

上一篇：【华为OD机试真题】羊、狼、农夫过河（狼羊过河）（python版）100%通过率 超详细代码注释 代码深度解读

下一篇：知识点回顾（一）

“12-Vue技术栈之Vuex的使用” 的相关文章

2022最新前端vue面试题_前端vue面试题1年前 (2023-02-02)
vite构建vue项目目录简介1年前 (2023-02-02)
基于Java+SpringBoot+vue+elementui药品商城采购系统详细设计实现1年前 (2023-02-02)
vite+vue3+Ts搭建基础项目框架1年前 (2023-02-02)
nodejs+vue+element+eachers构建开源项目大型连续剧（5）前端请求封装，完成用户注册。1年前 (2023-02-02)
【vue设计与实现】解析器 - 解析文本与解码HTML实体1年前 (2023-02-02)
如何在浏览器中安装使用Vue开发者工具？Vue开发者工具的安装使用？可直接提取插件安装使用1年前 (2023-02-02)
VUE|后台管理项目——动态路由权限管理1年前 (2023-02-02)
【手写 Vue2.x 源码】第二十六篇 - 数组依赖收集的实现1年前 (2023-02-02)
Laravel9+Vue+ElementUI快速搭建后台管理系统1年前 (2023-02-02)

阿里云国际版