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 的具体分析

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

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

// B.vue中 
<span> {{$store.state.count}} </span>

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中 
<template>
  <div>
    <input type="button" value="减少" @click="remove">
    <input type="button" value="增加" @click="add">
    <br>
    <input type="text" v-model="$store.state.count">
  </div>
</template>

<script>
export default {
   methods: {
      add() {
        // 千万不要这么用，不符合 vuex 的设计理念
        // this.$store.state.count++;
        this.$store.commit("increment");
       },
      remove() {
        this.$store.commit("subtract", { c: 3, d: 1 });
      }
  }
}

getter对象：里面的值永远是 函数形式 的，函数接收的第一个值永远是 state。
这里的 getters，只负责对外提供数据，不负责修改数据，如果想要修改state 中的数据，请去找 mutations。
发现 getters 中的方法，和组件中的过滤器比较类似，因为过滤器和getters都没有修改原数据，都是把原数据做了一层包装，提供给了调用者；
其次， getters 也和computed 比较像，只要state中的数据发生变化了，那么，如果 getters 正好也引用了这个数据，那么就会立即触发 getters 的重新求值

// main.js 中
var store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: { },
  getters: {
    optCount: function (state) {
      return '当前最新的count值是：' + state.count
    }
  }
})

// C.vue 中
<h3>{{ $store.getters.optCount }}</h3>

三、 Vuex与localStorage

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state

// main.js 中
// 每次刚进入 网站，肯定会 调用 main.js 在刚调用的时候，先从本地存储中，把 count 的数据读出来，放到 store 中
var count = JSON.parse(localStorage.getItem('count') || '0')
var store = new Vuex.Store({
  state: {
    count:count
  },
  mutations: {
      increment(state) {
        state.count++
 // 当 更新 count 之后，把 count 存储到 本地的 localStorage 中
      localStorage.setItem('count', JSON.stringify(state.count))
      },
      subtract(state, obj) {
        console.log(obj)
        state.count -= (obj.c + obj.d)
       localStorage.setItem('count', JSON.stringify(state.count))
      }
   },
  getters: {}
})

这里需要注意的是：由于vuex里，我们保存的状态，都是数字，而localStorage只支持字符串，所以需要用JSON转换：

JSON.stringify(state.subscribeList);   // array -> string
JSON.parse(window.localStorage.getItem("subscribeList"));    // string -> array

04 Vue中组件通信(下)

推荐阅读更多精彩内容