Vue插件之Vuex的安装以及使用

最新推荐文章于 2023-05-29 10:12:05 发布

默默无闻的IT民工

最新推荐文章于 2023-05-29 10:12:05 发布

阅读量1k

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_51972565/article/details/125902166

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue插件之Vuex的使用方法和作用

什么是vuex?

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用？

多个组件需要共享数据时

3.搭建vuex环境

安装：npm i vuex@3(2.x版本使用vuex 3.x)
(vue3支持vuex4版本但是vue2只能用vuex 3版本否则报错)

npm i vuex

使用vuex

创建文件：src/store/index.js

在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
})

在main.js中创建Vue实例时传入store配置项

 ......
 //引入store
 import store from './store'
 ......
 
 //创建Vue实例
 new Vue({
 	el:'#app',
 	render: h => h(App),
 	store
 })

4.基本使用

从官网文档找的流程图：
在这里插入图片描述
Vuex管理着Actions以及Mutations和State三个对象,这三个对象都在store中，也就是vuex组件的核心，通过store中的dispatch方法可以将要处理的数据，传给actions中对应的方法，actions拿到数据和对应的方法可以与后端联系处理业务逻辑之后，再commit到mutations，mutations只是处理state中的数据，不涉及业务逻辑，处理之后state更新，重新渲染模板，完成交互。如果只是简单的数据加工并且要共享到所有组件可以直接使用commit方法提交到mutations而不用经过actions。
下面是个简单的例子：
为了实现数字的加减，并且得到的sum必须共享，使用vuex完成。
在这里插入图片描述
App.vue

<template>
  <div id="app">
    <Count/>
  </div>
</template>
<script>
import Count from './components/Count';
export default {
  name: "App",
  components: {
    Count
}
};
</script>
<style>
</style>

组件Count.vue

<template>
  	<div>
		<h3>当前和为：{{$store.state.sum}}</h3><br>
		<select v-model.number="number">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(number)">+</button>
		<button @click="decrement(number)">-</button>
		<button @click="incrementOdd(number)">当和为奇数可+</button>
		<button @click="incrementWait(number)">等待一秒+</button>
	</div>
</template>

<script>
export default {
	name:'Count',
	data() {
		return {
			number:1
		}
	},
	methods:{
		//使用vuex处理共享数据，1.如果没有复杂的业务逻辑，能够直接获取数据处理，可以直接通过$store.commit到对应的mutations
		increment(value){
			this.$store.commit('INCREMENT',value)
		},
		decrement(value){
			this.$store.commit('DECREMENT',value)
		},
		// 2. 如果有必要的业务逻辑和数据加工，条件判断等处理，以及从后端获取数据操作，先通过$store.dispatch到actions做进一步处理，再commit到mutations
		incrementOdd(value){
			this.$store.dispatch('incrementOdd',value)
		},
		incrementWait(value){
			this.$store.dispatch('incrementWait',value)
		}
	}
}
</script>

<style> 
</style>

以上这个例子简单的使用了vuex，同样的如果有很多组件需要获取以及修改state中的数据，都是通过以上方式

在index.js配置actions中的方法、配置mutations中的方法，配置共享的数据state，为了便于区分actions与mutations中的方法名重复，mutations中的方法名用了大写
组件中读取vuex中的数据：$store.state.sum
组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

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

简写方式

因为this.$store.state.xxx，以及this.$store.commit...这种方式的代码片段经常重复多次使用
所以有简单的配置方式使得代码更加方便

//简写方式
		...mapMutations({increment:'INCREMENT',decrement:'DECREMENT'}),
		//使用vuex处理共享数据，1.如果没有复杂的业务逻辑，能够直接获取数据处理，可以直接通过$store.commit到对应的mutations
		// increment(value){
		// 	this.$store.commit('INCREMENT',value)
		// },
		// decrement(value){
		// 	this.$store.commit('DECREMENT',value)
		// },
		
		//简写方式
		...mapActions(['incrementOdd','incrementWait']),
		// 2. 如果有必要的业务逻辑和数据加工，条件判断等处理，以及从后端获取数据操作，先通过$store.dispatch到actions做进一步处理，再commit到mutations
		// incrementOdd(value){
		// 	this.$store.dispatch('incrementOdd',value)
		// },
		// incrementWait(value){
		// 	this.$store.dispatch('incrementWait',value)
		// }

注意：当mapState,mapActions,mapMutations，mapGetters参数以及方法名不相同时，使用对象方式传参，并且涉及方法时，因为方法要传入参数，所以必须在事件触发的函数中就传入参数，不然简写方式无法传入参数。而当方法名与actions或者mutations中的方法名一致时，则使用方式传入方法名。

<button @click="increment(number)">+</button>
		<button @click="decrement(number)">-</button>
		<button @click="incrementOdd(number)">当和为奇数可+</button>
		<button @click="incrementWait(number)">等待一秒+</button>

vuex中类似computed的计算属性：getters

getters类似于在Vue实例中的computed属性，用于拿data中的数据计算。而getters则是拿state中的数据进行计算。

使用方式：
1.同样在store目录index.js下进行配置：

//getters: 计算属性
const getters = {
    //获取state进行计算
    biggerSum(state){
        return state.sum*10
    }
}

export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

获取：
除了使用this.$store.getters.sum之外，也有简写方式，同上面一样，两种方式：

...mapGetters({biggerSum:'biggerSum'})
...mapGetters(['biggerSum'])

注意：属性简写是写在computed当中，方法简写写在methods中

computed:{
		//简写方式
		...mapState(['sum']),
		...mapGetters(['biggerSum'])
	},
methods:{
		//简写方式
		...mapMutations({increment:'INCREMENT',decrement:'DECREMENT'}),
		...mapActions(['incrementOdd','incrementWait']),
}

veux模块化

当我们配置多个store中需要共享与操作的方法并且各自成一个模块的时候，我们可以定义多个模块：
1.在index.js中定义多个模块：

const moudleA = {
	state:{...}
	actions:{...}
	mutations:{...}
	getters:{...}
}
const moudleB = {
	state:{...}
	actions:{...}
	mutations:{...}
	getters:{...}
}
export default new Vuex.store{
	moudle:{
		 moudleA,
		 moudleB
	}
}

2.同理也可以写模块文件（moudleA.js、moudleB.js），再在index.js中引入

模块使用方式
此时，store中存的是多个模块：store{modleA,moudleB}
要使用各个模块中的数据以及方法：则使用mapXxxx简写方式最好：
注意前提：在模块中开启命名空间配置

const moudleA = {
	namespaced:true,
	state:{...}
	actions:{...}
	mutations:{...}
	getters:{...}
}
const moudleB = {
	namespaced:true,
	...
}

之后简写方式如下：

computed:{
		//简写方式
		...mapState('moudleA',['sum']),
		..mapState('moudleB',['data_B']),
		...mapGetters('moudleA',['biggerSum'])
	},
methods:{
		//简写方式
...mapMutations('moudleA',{increment:'INCREMENT',decrement:'DECREMENT'}),
...mapActions('moudleA',['incrementOdd','incrementWait']),
...mapActions('moudleB',['modleBMethod']),
}