04 Vue中组件通信(下)

使用vuex来实现组件通信
一、vuex 的安装与使用

• 安装
  npm install vuex -S
• 使用

// main.js
import Vue from 'vue'
// 1. 导入 vuex 包
import Vuex from 'vuex'
// 2. 注册 vuex 到 vue 中
Vue.use(Vuex)
// 3. new Vuex.Store() 实例，得到一个 数据仓储对象
var store = new Vuex.Store({
  state: {...},
  mutations: {},
  getters: {}
})

import App from './App.vue'
const vm = new Vue({
  el: '#app',
  render: c => c(App),
  store // 5. 将 vuex 创建的 store 挂载到 VM 实例上， 只要挂载到了 vm 上，任何组件都能使用 store 来存取数据
})

二、 vuex 的具体分析

1. state 对象：类似于组件中的 data,专门用来存储数据。在组件中，若要访问 store 中的数据，只能通过 this.$store.state.xxx 来访问

// main.js 中
var store = new Vuex.Store({
  state: {
    count: 0
},
  mutations: {},
  getters: {}
})

// B.vue中 
 {{$store.state.count}} 

2. mutations 对象：若要操作store 中的state 值，只能通过调用mutations 提供的方法，才能操作对应的数据，步推荐直接操作 state 中的数据，因为万一导致了数据的紊乱，不能快速定位到错误的原因，因为每个组件都有可能有操作数据的方法。
   若子组件想要调用mutations 中的方法，只能使用 this.$store.commit('方法名')，这种调用mutations 方法的格式和 this.$emit('父组件中的方法名')类似
   注意： mutations 的 函数参数列表中，最多支持两个参数，其中，参数1： 是 state 状态； 参数2： 通过commit提交过来的参数（若要传多个参数，则用对象的方式传入）；

// main.js 中
var store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
      increment(state) {
        state.count++
      },
      subtract(state, obj) {
        console.log(obj)
        state.count -= (obj.c + obj.d)
      }
   },
  getters: {}
})

// B.vue中