用provide/inject来实现简单的vuex状态管理功能

在开发的时候，常常会涉及到组件之间的通讯。简单的有父子组件的通讯，兄弟组件的通讯一般能够借助Bus来进行。固然也能够用vuex来进行状态管理，可是，有时候用vuex未免有把简单的问题复杂化。

若是要进行状态管理的话，好比要存取用户信息，这时候能够利用 Vue.js 2.2.0 版本后新增的 API provide/inject来写，详细看文档

https://cn.vuejs.org/v2/api/#provide-inject

用法就是在一个组件中provide一个属性，另外一个组件inject，就能够在这个组件中访问前面组件的属性

// A.vue
export default {
  provide: {
    title: 'Hello World'
  }
}

// B.vue
export default {
  inject: ['title'],
  mounted () {
    console.log(this.name);  //Hello World

  } 
}

须要注意的是：

provide 和 inject 绑定并非可响应的。这是刻意为之的。然而，若是你传入了一个可监听的对象，那么其对象的属性仍是可响应的。

就是说若是A.vue的title属性变化了，B组件里的title是不变的，仍是Hello World

 

用这个来替代vuex,存取用户信息

app.vue 是整个项目第一个被渲染的组件，并且只会渲染一次（即便切换路由，app.vue 也不会被再次渲染），利用这个特性，很适合作一次性全局的状态数据管理，例如，咱们将用户的登陆信息保存起来：

provide / inject API 主要解决了跨级组件间的通讯问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间创建了一种主动提供与依赖注入的关系。

app.vue 提供userInfo信息

export default {
    provide () {
      return {
        app: this
      }
    },
    data () {
      return {
        userInfo: null
      }
    },
    methods: {
      getUserInfo () {
        // 这里经过 ajax 获取用户信息后赋值
        $.ajax('/userinfo', (data) => {
          this.userInfo = data;
        });
      }
    },
    mounted () {
      this.getUserInfo();
    }
  }

这样，任何页面均可以访问userInfo

<template>
  <div>
    {{ app.userInfo }}
  </div>
</template>
<script>
  export default {
    inject: ['app'],
    created(){
      console.log(this.app.userInfo);
    }
  }
</script>

除了直接使用数据，还能够调用方法。好比在某个页面里，修改了我的资料，这时一开始在 app.vue 里获取的 userInfo 已经不是最新的了，须要从新获取。

export default {
    inject: ['app'],
    methods: {
      changeUserInfo () {
        // 这里修改完用户数据后，通知 app.vue 更新，如下为伪代码
        $.ajax('/updateuserinfo', () => {
          // 直接经过 this.app 就能够调用 app.vue 里的方法
          this.app.getUserInfo();
        })
      }
    }
  }

 

参考：https://juejin.im/book/5bc844166fb9a05cd676ebca/section/5bc845435188255c533655f4

结语：vue用了挺久了的，但基本都用的是比较经常使用的一些props,watch,computed,mixins等，知道angular里面有依赖注入，一直不知道vue也能够，偶然看到这个方法，感受用起来要比vuex简单，容易理解，用起来应该可以简化不少代码。mark~