Question

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

例如：

我想只创建一个函数来设置和检索localstorage数据。所以我这样做：

在我的登录组件中

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

现在发送帖子请求的另一个组件

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

这只是一个例子，想象一下当检索一个可以输入错误的密钥时设置多个localstorage项时会发生什么。

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

Answer 1

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

<强>混入
Mixins是一种定义可重用功能的方法，可以使用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!"

自定义模块
如果逻辑分组有很多共享功能，则可能需要创建一个自定义模块，然后将其导入到您需要的地方（就像以角度方式注入服务一样）。

// 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，则应该可以开箱即用。

分散vuejs中的功能

1 个答案: