vue的状态管理#组件通信#中间存储

概述

多组件的通信在实际项目开发中一直存在，毕竟多个页面需要同一组数据，或者一个页面请求的数据给另一个页面，或同页面不同组件通信，如果是大型项目则推荐vuex，但是小型项目属实没必要，这里推荐store.js，这也是我在查看vuex文档时官方给出的小型项目代替品。但是官方文档属实有点难懂，最初看的时候很折磨，对于实力不够的同学来说还是看我这篇来的实在。

原理

简单来说，这里会有一个中间件，也就是store.js，a页面把数据通过store的set方法放置在内，b页面再通过get方法取走。
首先来看store.js

import { reactive } from 'vue'

export const store = {
  
  debug: true,

  state: reactive({
    message: 'Hello!'
  }),

  setMessageAction(newValue) {
    if (this.debug) {
      console.log('setMessageAction triggered with', newValue)
    }

    this.state.message = newValue
  },

  clearMessageAction() {
    if (this.debug) {
      console.log('clearMessageAction triggered')
    }

    this.state.message = ''
  }
}

很简单，store里面定义了一个state变量，是reactive的类型，你也可以定义多个，然后有一个setMessageAction，这个就是set了，在a页面调用从用修改state里面message的值，clearMessageAction则用来清空message的值，b页面读取也很简单，直接读store.state.message就好了，下面再来看位于a页面的代码。

import { store } from "../store.js" //首先你得引入，注意路径，你不一定和我一样

setstore(params){
	store.setMessageAction(params);
}

ok了，是不是具简单，这个store里面的值就被修改了。
再来看b页面，

import { store } from "../store.js"
  data() {
    return {
      tableData: [{}],
      sharedState: store.state,
    }
  },
  watch: {
    'sharedState.message'(newValue, oldValue) {
      this.tableData = this.sharedState.message;
      console.log(this.sharedState.message);
    }
  }

首先再data中声明好，然后为了监听该变量做到实时修改，所有我写了watch，这个一旦a页面修改过message，b页面就能立马反应过来，赋值给tableData，这个页面也能实时显示了，所谓是一举多得，非常nice。