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']),
}
以上就是vuex一般的使用方法