vuex中的四大金刚

vuex常常让我这样的初学者摸不着头脑，刚学完vuex的我想用下面几个简单通俗的栗子来进行小小的分享

什么是vuex？

Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。(vuex是以插件的方式存在的)
复制代码

什么情况下使用vuex?

并不是所有的项目都适合使用vuex，vuex一般适用于大型项目。在进行大型项目开发的时候，常常会碰到多个组件需要用到同一个状态，这个时候，vuex就能派上用场，它能把组件的共享状态抽取出来，当做一个全局单例模式进行管理。这样不管你在何处改变状态，都会通知使用该状态的组件做出相应修改。
复制代码

如何引入vuex？

* 安装 ---- `npm install vuex --save`

* 引入---- 以插件的方式引入，在src目录下创建一个store.js文件并在其中引入

```
import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)
```
复制代码

vue中的四大金刚

为了更加通俗易懂地理解，引入公司的概念来阐述这四大核心
复制代码

• state ---- 唯一一个数据源，vuex的总仓库，存储数据 （相当于公司的CEO,掌管这公司总资产）

• mutations ---- 用于修改state的数据状态，并且只能在mutations中修改state的数据 状态（相当于公司的财务部门，拥有修改state的权力）

• actions ---- 解决异步改变共享数据(相当于工作部门，向财务部门提交修改state的请求)

• getters ---- 对state 里面的数据二次处理（对数据进行过滤类似filter的作用）

下图是这几个状态之间的关系图：

接下来通过几个简单的demo来讲解

一. 在store.js中定义好以下对象
复制代码

1. 先定义好数据仓库中的数据

const state = {
  showSidebar: true,
}

复制代码

2. 在mutations中定义一个sidebar的方法，用来修改state中showSidebar值，传入两个参数

const mutations = {
 sidebar(state, status) {
    state.showSidebar = status
    }
  }
复制代码

3. 在actions中创建setShowSidebar方法，用来接收mutations中的sidebar方法。传入两个参数， {commit} 参数是用来将其提交给mutations，是必须的参数。

const actions = {
  setShowSidebar ({commit}, status) {
    commit(sidebar, status)
    }
  }
复制代码

4. 在getters中对vuex顶层数据进行过滤，而不改动state里原本的数据

const getters = {
  showSidebar: state => state.showSidebar
}

复制代码

最后再抛出这四个对象

export default {
  state,
  mutations,
  actions,
  getters
}
复制代码

二. 调用store.js中的state的值

1. 新建一个vue的模板，位置在components文件夹下，名字叫sidebar.vue。 此时我们动态绑定一个class，其值由数据源仓库中的state中的showSidebar值决定，并且绑定一个点击事件_hidebar。

<template>
   <div class="sidebar" :class="{showSidebar: showSidebar}" @click="_hidebar">
   </div>
</template>

复制代码

2. 若想要从state仓库中取出showSidebar的值，则可以引入 mapGetters 辅助函数，并且放在 computed 属性里面，用法如下。

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'showSidebar'
    ])
  }
}

复制代码

3. 若想调用actions中的 setShowSidebar 方法，可以通过$store.dispatch() 来进行调用。

methods: {
    _hidebar () {
      this.$store.dispatch('setShowSidebar', false)
    }
  }
复制代码

4. 还有一种方法，可以通过引入 mapGetters, mapMutations, mapActions 这三个辅助函数来对state仓库中的数据进行操作。

• ...mapMutations ({}) 获取mutations中的 sidebar 方法 ，并取名叫sidebar,第3点中的 _hidebar () {this.$store.dispatch('setShowSidebar', false)} 就可以改写为 _hide () {this.sidebar(false)}

• ...mapActions ([]) 获取actions中的setShowSidebar 方法，与this.$store.dispatch('setShowSidebar'）的作用一样。

**小提示：mapMutations中用{} mapActions中用[] **

<script>
import { mapGetters,mapMutations,mapActions } from "vuex"
export default {
  computed: {
    ...mapGetters([
     'showSidebar'
    ])
  },
  methods: {
       ...mapMutations({
      sidebar: 'sidebar'
    }),
    ...mapActions([
      'setShowSidebar'
    ])
  }
}
</script>
复制代码

总结

以上是来自一只vue学习ing的大胖狗的分享，栗子是简单通俗的，若有不合理的地方请大佬们轻喷。:kissing_heart:
复制代码