Vuex 的组成部分

完整的应用 Vuex 开发的应用结构应该是这样的：

Vuex 核心部分说明

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

//store为实例化生成的
import store from’./store’
new Vue({
el: ‘#app’,
store,
render: h => h(App)
})

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

const mutations = {…};
const actions = {…};
const state = {…};
Vuex.Store({
state,
actions,
mutation
});

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

//我是组件
import {mapState} from ‘vuex’
export default {
computed: mapState({
count: state => state.count
})
}

Mutations

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

const mutations = {
mutationName(state) {
//在这里改变state中的数据
}
}

在组件中触发：

//我是一个组件
export default {
methods: {
handleClick() {
this.$store.commit(‘mutationName’)
}
}
}

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

import {mapMutations} from’vuex’
//我是一个组件
exportdefault {
methods: mapMutations([
‘mutationName’
])
}

本文转载自 Think体验设计公众号。

原文链接：https://mp.weixin.qq.com/s/tIxET_5qhollePtyYRbXvw

创作场景

Vue 组件化开发之 Vuex 了解一下（二）