Vue兄弟组件通信（VueX）

在vue里，组件之间的作用域是独立的，父组件跟子组件之间的通讯可以通过prop属性来传参，但是在兄弟组件之间通讯就比较麻烦了。
比如A组件要告诉一件事给B组件，那么A就要先告诉他们的父组件，然后父组件再告诉B。
当组件比较多，要互相通讯的事情很多的话，管理起来是非常累的事情。
而vuex正是为了解决这个问题，让多个子组件之间可以方便的通讯。

vuex模块化应用实践

vuex的使用方法

1. vue store存储commit 和dispatch的区别

1. 创建app.js文件

import Vue from 'vue'
import {SIDEBAR_TYPE} from "@/store/mutation-types"

const app = {

 state: {
    sidebar: {
      opened: true,
      withoutAnimation: false
    }
  },
 mutations: {
    SET_SIDEBAR_TYPE: (state, type) => {
      state.sidebar.opened = type
      Vue.ls.set(SIDEBAR_TYPE, type)
    }
  },
  actions: {
    setSidebar: ({ commit }, type) => {
      commit('SET_SIDEBAR_TYPE', type)
    }
  }
}
export default app

1. dispatch：异步操作，调用的方法在actions中

存储:

this.$store.dispatch('setSidebar', false)

取值:

this.$store.getters.targetUser;

2. commit：同步操作，方法定义在mutations中

存储:

this.$store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))

取值:

this.$store.state.setTargetUser

2. vuex store用法

Vue 中 store 基本用法