vuejs 中的去中心化功能答案

【问题标题】：Decentralizing functions in vuejsvuejs 中的去中心化功能
【发布时间】：2018-05-04 21:21:48
【问题描述】：

来自 Angular2，我习惯于服务和注入服务，因此重用功能我如何在 vuejs 中实现相同的功能

例如：

我只想创建一个函数来设置和检索本地存储数据。所以我是这样做的：

在我的登录组件中

  this.$axios.post('login')
      .then((res)=>{
        localstorage.setItem('access-token', res.data.access_token);
     })

现在在发送 post 请求时在另一个组件中

export default{
 methods:{
  getvals(){
   localstorage.getItem('access-token') //do stuff after retrieve
   }
 }
}

这只是一个例子，想象一下当设置多个本地存储项时会发生什么，当检索一个可能键入错误的键时。

我如何集中功能，例如：设置令牌（在 angular2 中将是服务）

【问题讨论】：

标签： vuejs2

【解决方案1】：

在 Vue 中，有几种不同的方式可以在组件之间共享功能，但我相信最常用的是 mixins 或自定义模块。

混合
Mixin 是一种定义可重用功能的方法，可以使用 mixin 将其注入到组件中。下面是来自官方Vue documentation的一个简单例子：

// define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"

自定义模块
如果有很多具有逻辑分组的共享功能，那么创建一个自定义模块并将其导入您需要的地方可能是有意义的（例如您如何在 Angular 中注入服务）。

// localStorageHandler.js
const localStorageHandler = {
  setToken (token) {
    localStorage.setItem('access-token', token)
  },
  getToken () {
    localstorage.getItem('access-token')
  }
}

export default localStorageHandler

然后在你的组件中：

// yourcomponent.vue
import localStorageHandler from 'localStorageHandler'
export default{
  methods:{
   getvals(){
      const token = localStorageHandler.getToken()
    }
  }
}

模块使用更现代的 JavaScript 语法，并非所有浏览器都支持这种语法，因此需要您对代码进行预处理。如果您使用的是vue-cli webpack template，它应该可以开箱即用。

【讨论】：