为什么有些vue项目推荐使用Vuex进行管理？VueX的基本使用方法

1. VueX是什么？

Vue是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据的共享。

2. 使用Vuex有什么好处？

项目使用vuex可以大量减少数据在各组件之间的传递，如图所示。Vuex使用了Store对数据进行了全局统一管理。

3. 使用Vuex统一管理状态的好处

能够在vuex中集中管理共享的数据，易于开发和后期维护
能够高效的实现组件之间的数据共享，提高开发效率
存储在vuex中的数据是响应式的，能够实时保持数据与页面的同步

4. 什么样的数据适合使用vuex呢？

组件之间共享的数据，适合使用vuex进行管理。而对于组件中一些私有的数据，依旧可以存储在组件自身的data中。

5. Vuex的四大核心

 1. State
 	存放数据
 2.Mutation
 	变更数据
 	this.$store.commit(**)
 3. Action
	异步操作变更数据
	this.$store.dispatch(**)
 4. Getter
 	对数据进行加工处理形成新的数据
 	this.$store.getters.**

6. Vuex的使用

首先 先看下我的vuex示例项目的基本结构

然后 配置加载vuex

## main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

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

## index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add1 (state) {
      state.count++
    }
  },
  actions: {
    add2 (context) {
      setTimeout(() => {
        // 异步调用mutations中的方法 适宜于异步操作
        // 不能直接修改state中的数据 需要借助mutations中的方法进行操作
        context.commit('add1')
      }, 1000)
    }
  },
  getters: {
    show (state) {
      return 'hello world!' + state.count
    }
  }
})

## APP.vue
<template>
  <div>
  VueX的使用
    <my-test></my-test>
  </div>
</template>
<script>
import test from './components/test.vue'
export default {
  data () {
    return {
    }
  },
  components: {
    'my-test': test
  }
}
</script>

## test.vue
<template>
  <div>
    <div>{{$store.getters.show}}</div>
    当前值为{{count}}
    <button @click="add1()">+1  mutations</button>
    <button @click="add2()">+1  actions</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapState(['count']), // 获取Store State中的值
    ...mapGetters(['show']) // 调用Getters中的方法
  },
  methods: {
    ...mapMutations(['add1']), // 调用Mutations
    ...mapActions(['add2']) // 调用Actions 异步
  }
}
</script>

接下来看看效果演示