Vuex 简单入门(1)

什么是 Vuex

========

在 Vue 中，多组件的开发给我们带来了很多的方便，但同时当项目规模变大的时候，多个组件间的数据通信和状态管理就显得难以维护。而 Vuex 就此应运而生。将状态管理单独拎出来，应用统一的方式进行处理，在后期维护的过程中数据的修改和维护就变得简单而清晰了。Vuex 采用和 Redux 类似的单向数据流的方式来管理数据。用户界面负责触发动作（Action）进而改变对应状态（State），从而反映到视图（View）上。如下图所示：

vuex-flow

使用 Vuex

=======

安装：

npm install --save- vuex

引入：

import Vuex from ‘vuex’

import Vue from ‘vue’

Vue.use(Vuex)

Vuex 的组成部分

==========

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

vuex-complete

下面针对比较核心的部分进行说明。

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,

mutations

})

后续在组件中使用的过程中，如果想要获取对应的状态你就可以直接使用 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’)

}

}

}

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

import {mapMutations} from ‘vuex’

//我是一个组件

export default {

methods: mapMutations([

‘mutationName’

])

}

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。