vuex状态管理:vuex
什么是vuex?
vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
这是vuex官网的解释。我们把它理解为在data中的属性需要共享给其他vue组件使用的部分,即data中需要共用的属性。
vuex的核心概念
1. this.$store:我们可以通过this.$store在vue的组件中获取vuex的实例。
2. State:vuex中的数据源,我们可以通过this.$store.state获取我们在vuex中声明的全局变量的值。
3. Getter:相当于vue中的computed,及计算属性,可以用于监听、计算 state中的值的变化。
4. Mutation:vuex中去操作数据的方法(只能同步执行)。
5. Action:用来操作Mutation 的动作,他不能直接去操作数据源,但可以把mutation变为异步的。
6. Module:模块化,当应用足够大的时候,可以把vuex分成多个子模块。
上手vuex
用vue-cli构建一个项目,用命令npm install vuex --save来安装vuex
在src文件夹下新建一个vuex文件夹,并在文件夹下新建store.js文件
配置main.js
import App from './App'
import router from './router'
import vuex from 'vuex'
Vue.use(vuex)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
配置store.js
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state={
count:1
}
export default new vuex.Store({
state
})
在components新建一个count.vue组件,先引入,再注册,最后调用
<template>
<div>
{{$store.state.count}} <!-- 调用 -->
</div>
</template>
<script>
import store from '@/vuex/store' //引入
export default {
store //注册
}
</script>
<style>
</style>
在定义两个方法来改变state中的值
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state={
count:1
}
const mutations={
add(state){ //此处的state是上面的state对象
state.count++
},
reduce(state) {
state.count--
}
}
//用export default 暴露,让外部可以使用
export default new vuex.Store({
state,
mutations
})
在组件中调用mutations的方法,要以commit的方式调用
<template>
<div>
{{$store.state.count}}
<div>
<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>
</div>
</div>
</template>
<script>
import store from '@/vuex/store'
export default {
store
}
</script>
<style>
</style>
从图中可以看到,已经实现了对vuex中的count加减操作
访问state的三种方式
把stroe.js中的值,赋值给我们模板里data中的值,有三种赋值方式:
1. 通过computed的计算属性直接赋值
computed属性可以在输出前,对data中的值进行改变,我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。
export default {
store,
computed:{
count(state){
return this.$store.state.count
}
}
}
同时将模板中的$store.state.count改为count,效果不变
2. 通过mapState的对象来赋值
先引入mapState
import {mapState} from 'vuex'
再修改成如下代码:
computed:mapState({
count(state){
return state.count
}
})
3. 通过mapState的数组来赋值
computed:mapState(['count'])
这是最简单的写法,也是开发中最常用的方法
Mutations
接下来修改一下mutations中的add方法,给它加个参数
const mutations={
add(state,x){
state.count+=x
},
reduce(state) {
state.count--
}
}
在模板中相应修改:
<div>
<button @click="$store.commit('add',10)">+</button>
<button @click="$store.commit('reduce')">-</button>
</div>
类似之前的state的属性的调用,mutations的方法调用也很麻烦,没有人会喜欢用$store.commit()去调用方法
模板获取Mutations方法
先引入mapMutations
import {mapState,mapMutations} from 'vuex'
在methods中加入mapMutations的方法
methods:mapMutations(['add','reduce'])
最后修改模板,就跟平时的调用方法一样了
<div>
<button @click="add(10)">+</button>
<button @click="reduce">-</button>
</div>
getters计算过滤操作
对count进行计算属性的操作,让它输出前先加上100
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state={
count:1
}
const mutations={
add(state,x){
state.count+=x
},
reduce(state) {
state.count--
}
}
const getters={
count(state){
return state.count+=100
}
}
//用export default 暴露,让外部可以使用
export default new vuex.Store({
state,
mutations,
getters
})
state和getters都是通过computed属性输出的,所以当getters的介入会覆盖掉state,所以使用es6的扩展运算符…
computed:{
...mapState(['count']),
count(){
return this.$store.getters.count
}
}
测试一下会发现每次都是+110,是因为点击一下,先通过getters计算得到新的state(此时已经+100) 然后由mutation改变+10
用mapGetters简化模板写法
先引入mapGetters
import {mapState,mapMutations,mapGetters} from 'vuex'
修改成如下代码:
computed:{
...mapState(['count']),
...mapGetters(['count'])
}
Actions异步修改状态
actions和之前讲的mutations功能基本一样,不同点是,actions是异步的改变state状态,而mutations是同步改变状态。
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state={
count:1
}
const mutations={
add(state,x){
state.count+=x
},
reduce(state) {
state.count--
}
}
const getters={
count(state){
return state.count+=100
}
}
const actions={
actions_add(context){
context.commit('add',10)
},
actions_reduce({commit}){
commit('reduce')
}
}
//用export default 暴露,让外部可以使用
export default new vuex.Store({
state,
mutations,
getters,
actions
})
两个方法的传参不同:
ontext:上下文对象,即store本身
{commit}:直接把commit对象传递过来,更加清晰
模板使用Actions方法
引入mapActions
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
在methods中写入:
methods:{
...mapMutations(['add','reduce']),
...mapActions(['actions_add','actions_reduce'])
}
最后在模板中调用方法
<div>
<button @click="actions_add(10)">+</button>
<button @click="actions_reduce">-</button>
</div>
Module模块组
随着项目的复杂性增加,共享的状态越来越多,此时就需要对状态进行分组,分组后再进行按组编写,实现状态管理器的模块组操作。
新增两个文件夹,并且都新增一个store.js
在test1/store.js中写入
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state = {
name: 'test1'
}
export default new vuex.Store({
state
})
复制test2/store.js中,修改name为test2
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state = {
name: 'test2'
}
export default new vuex.Store({
state
})
在根目录的store.js中引入这两个模块
import Vue from 'vue'
import vuex from 'vuex'
import modules1 from './test1/store'
import modules2 from './test2/store'
Vue.use(vuex)
export default new vuex.Store({
modules: {
modules1,
modules2
}
})
最后在模板中使用
<template>
<div>
{{name1}}
{{name2}}
</div>
</template>
<script>
import store from '@/vuex/store'
import {mapState} from 'vuex'
export default {
store,
computed:{
...mapState({
name1:({modules1})=>modules1.name,
name2:({modules2})=>modules2.name,
}),
}
}
</script>
<style>
</style>