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

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