用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