非父子组件间的通信和事件触发（vuex和localStorage奇妙用法）

在项目开发中，大多数时候都是父子组件间的通信，非父子组件之间的通信比较少，导致了有时候遇到同一页面，不同模块非父子组件之间改变数据触发相应回调时，竟不知怎么下手了。

这个时候vuex和localStorage就派上用场了，面试时也经常会问题，在哪些场景使用了vuex和localStorage，这个时候就是一个很好的例子

项目中，同一个页面，一个是表单组件，里面是一个封装的基础组件，和组件关联的信息展示，嵌入的自定义下拉框组件，和关联信息展示是两个不关联的组件。

想要选择客户之后触发函数获取该客户下的客户花费。

实现
通过select组件的change事件，改变vuex的客户的值，然后在客户花费组件中监听这个vuex中的值得改变，改变了就触发相应的事件，获取对应的客户花费

// 改变值时，提交commit来改变vuex中的值
changeHandle (value, option) {
      // 改变vuex客户值，来获取办件申请页面客户额度
      if (this.propsFieldName === 'clientId') {
        this.$store.commit('setClientId', value)
      }
    }

// 监听代码
'$store.state.jetable.clientId': {
      handler (newO, oldO) {
        jetableAPI.getCreditLimit({ clientId: newO, userId: this.infoStr.userId }).then(res => {
          this.$nextTick(() => {
            this.client.amount = res.data.client?.declareQuota || 0
          })
        })
      }
    }

还有就是一个场景，在详情页面，也是这种类似的非父子组件，传递数据
可以先通过window.localStorage.setItem('xxx', value)存到本地存储中，
再到相应页面window.localStorage.getItem('xxx')获取这个值。

总结

就是在非父子组件中我们可以使用vuex和localStorage来进行数据传输和事件回调。要记得可以这样用。这个也是我们面试时可以说的一个使用vuex和localStorage的地方，其实用法是很简单的