Vue之Vuex使用

一、需求：
       在使用Vue开发前端网页的时候难免会被父子组件通信困扰，而且代码确实不好看，可阅读性低。为了解决组件内容共享问题，Vuex诞生了。下面以弹窗实例来介绍Vuex的使用。
二、实现：
       思路：
              1、创建父子组件。
              2、父组件通过commit更新弹窗的状态。
              3、子组件通过store获取弹窗状态，并显示或关闭。通过computed更新store至组件层状态
       代码如下：

//父组件
<labelModal></labelModal>

子组件
<template>
  <Modal :value="flag"
         title="编辑标签"
         @on-ok="submit"
         @on-cancel="cancel">
    <Select v-model="selectLabels"
            filterable
            multiple>
      <Option v-for="item in mylabel"
              :value="item.value"
              :key="item.value">{{ item.label }}</Option>
    </Select>
  </Modal>
</template>
<script>
export default {
  name: 'labelModal',
  props: {
  },
  data () {
    return {
      mylabel: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        }
      ],
      selectLabels: [],
    }
  },
  computed: {
    flag () {
      return this.$store.state.dialog
    }
  },
  methods: {
    submit () {
      this.$store.commit('showDialog')
      //update标签
      console.log(this.selectLabels)
    },
    cancel () {
      this.$store.commit('showDialog')
      console.log('close')
    },
  }
}
</script>

store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    dialog: false
  },
  mutations: {
    showDialog (state) {
      state.dialog = state.dialog ? false : true
    }
  },
  actions: {},
  modules: {}
})