Vuex核心概念解析State Getters Mutations Actions

Vuex简介

Vuex是解决Vue组件和组件间相互通信而存在的。

安装:

1
npm install --save vuex

引入:

1
2
3
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

Vuex参数介绍

  • State:储存初始化数据
  • Getters:对State里面的数据二次处理(对数据进行过滤类似filter的作用)。比如State返回的为一个对象,我们想取对象中一个键的值用这个方法
  • Mutations:对数据进行计算的方法全部写在里面(类似computed)。在页面中触发时使用this.$store.commit('mutationName'),触发Mutations方法改变state的值
  • Actions:处理Mutations中已经写好的方法,其直接触发方式是this.$store.dispatch(actionName)

打印Vuex

1
2
3
4
5
6
7
8
9
10
11
console.log(Vuex) //Vuex为一个对象里面包含

Vuex = {
Store:function Store(){},
mapActions:function(){}, //对应Actions的结果集
mapGetters:function(){}, //对应Getters的结果集
mapMutations:function(){}, //对应Mutations的结果集
mapState:function(){}, //对应State的结果集
install:function install(){}, //暂时不做讲解
installed:true //暂时不做讲解
}

引用Vuex

1
2
import { mapState } from 'vuex';  //如果我们只需要里面的State时我们可以这样写
import { mapGetters, mapMutations } from 'vuex'; //如果需要引用多个时用这种方式处理

State

State负责存储整个应用的状态数据,一般需要在使用时在根节点注入store对象,后期就可以使用this.$store.state直接获取状态

1
2
3
4
5
6
7
8
//store为实例化生成的
import store from './store'

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

这个store可以理解为一个容器,包含着应用中的state等。实例化生成store的过程是:  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//./store文件
const store = new Vuex.Store({
state: { //放置state的值
count: 0,
strLength: "abcd1234"
},
getters: { //放置getters方法
strLength: state => state.aString.length
},
mutations: { //放置mutations方法
mutationName(state, data) {
//在这里改变state中的数据
state.count = 100;
}
},
//异步的数据操作
actions: { //放置actions方法
actionName({ commit }) {
//dosomething
commit('mutationName')
},
getUser ({commit}, id) {
api.getUser(id).then(response => {
commit('mutationName', {'httpCode': response.status, 'data': response.data})
}).catch((error) => { // 错误处理
console.log(error);
});
}
}
});

export default store;

后续在组件的使用过程中,如果想要获取对应的状态即可直接使用this.$store.state获取。当然,也可以利用Vuex提供的mapState辅助函数将state映射到计算属性中去,如

1
2
3
4
5
6
7
import {mapState} from 'vuex'

export default { //组件中
computed: mapState({
count: state => state.count
})
}

Getters

有些状态需要做二次处理,就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。

在组件中使用方式

1
2
3
4
5
6
7
import {mapGetters} from 'vuex'

export default {
computed: mapGetters([
'strLength'
])
}

Mutations

Mutations的中文意思是“变化”,利用它可以更改状态,本质就是用来处理数据的函数。store.commit(mutationName)是用来触发一个mutation的方法。需要记住的是,定义的mutation必须是同步函数,否则devtool中的数据将可能出现问题,使状态改变变得难以跟踪。

在组件中触发:

1
2
3
4
5
6
7
export default {
methods: {
handleClick() {
this.$store.commit('mutationName')
}
}
}

或者使用辅助函数mapMutations直接将触发函数映射到methods上,这样就能在元素事件绑定上直接使用了。如:

1
2
3
4
5
6
7
import {mapMutations} from 'vuex'

export default {
methods: mapMutations([
'mutationName'
])
}

Actions

Actions也可以用于改变状态,不过是通过触发mutation实现的,重要的是可以包含异步操作。其辅助函数是mapActions与mapMutations类似,也是绑定在组件的methods上的。如果选择直接触发的话,使用this.$store.dispatch(actionName)方法。

在组件中使用

1
2
3
4
5
6
7
import {mapActions} from 'vuex'

export default {
methods: mapActions([
'actionName',
])
}

Plugins

插件就是一个钩子函数,在初始化store的时候引入即可。比较常用的是内置的logger插件,用于作为调试使用。

1
2
3
4
5
6
7
//写在./store文件中
import createLogger from 'vuex/dist/logger'

const store = Vuex.Store({
...
plugins: [createLogger()]
})

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :