Vuex基础

父子组件之间的通信，父组件通过props向子组件传递参数，子组件通过$emit将数据回传给父组件。但是如果我们有多个不相关的组件要共用一份数据，又要如何实现呢？这里就要用到Vuex，详细看下官方文档

image.png

• State：所有组件想要共用数据的部分
• Mutations：直接操作State数据。在Mutations里定义如何改变这个数据
• Actions：告诉Mutations何时去执行改变数据的操作

以上这些是Vuex的内容，那么Vuex又是如何与组件关联的呢？
组件是有模板和数据组成，而Vuex中的State就是数据，虽然没有在data中，所以Vue模板是可以render这个数据的,Vue的组件也可以通过一些行为来触发Actions

我们用一个简单的例子来演示下Vuex的用法，这里我们实现对count的加减操作。

新建store.js

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

Vue.use(Vuex);

const state = {
  count: 1
};

const mutations = {
  increment(state) {
    state.count++;
  },

  decrement(state) {
    state.count--;
  }
};

const actions = {
  increment: ({commit}) => {
    commit('increment')
  },

  decrement: ({commit}) => {
    commit('decrement')
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions
})

在state中定义count，默认其值为1；
在mutations中定义increment方法，用于对count++操作；定义decrement方法，用于对count--操作；
在actions中commit

在main.js中引入store.js

import store from './store.js'

new Vue({
  el: '#app',
  router,
  store,
  components: {App},
  template: '<App/>'
})

创建组件vuex.vue

<template>
  <div>
    Vuex {{$store.state.count}}
    <button type="button" name="button" @click="increment">增加</button>
    <button type="button" name="button" @click="decrement">删减</button>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'

  export default {
    name: "vuex",
    methods: mapActions([
      'increment',
      'decrement'
    ])
  }
</script>

<style scoped>

</style>

在按钮中添加了点击事件increment和decrement，分别对应的是methods中mapActions的两个方法；
$store对应的就是在main.js中引入的store，state.count就是我们在store.js文件中的count

若对mapActions函数的写法不理解，可以看下官方文档的解释

image.png

效果如下：

image.png

通过点击【增加】或【删减】，可以看到数值的变化