使用Vue作曲器设置状态

Laravel + Vue.js

View Composers是Laravel框架中我最喜欢的功能之一。 View Composers是简单的类,可用于定义特定视图模板所需的数据。 今天,我将向您展示如何将它们与Vue.js一起使用,从而使我们能够为组件使用VueComposers。

**本文假设您了解Laravel的ViewComposers。
https://laravel.com/docs/5.5/views#view-composers

使用Vue原型定义路线:

我们可以使用Vue.prototype存储我们可以在整个应用中访问的路线。

  Vue.prototype。$ api.base ='http://site.local/api/' 
Vue.prototype。$ api.routes = {

// VueComposers
vueComposers:Vue.prototype。$ api.base +'vue / composers',
}

添加:Vue路线

可以将此路由添加到您的api或网络路由定义文件中。

 路线:: 前缀 ('vue')-> group( function (){ 
路线:: 任意 (“ composers”,“ API \ VueComposerController @ make”);
});

GET请求示例:
site.local / api / vue / composers?composers%5BcategorySelect%5D%5Bid%5D = 1

范例回应

  { 
“组成” :{
“ categorySelect” :[
{
“值” :1,
“ label” :“类别A”
},
{
“值” :2,
“ label” :“类别B”
}
]
},
“ notFound” :[

]
}

添加:VueComposerController

我们的VueComposerController将调用我们的VueComposer类中的方法,并构建一个包含每个组成的数据集的键集合(对象)和一个第二个集合,其中包含未找到的方法的名称。

  <?php名称空间 App \ Http \ Controllers \ API; 
使用 App \ Http \ Controllers \ Controller;
使用 Illuminate \ Http \ Request;
使用 App \ Http \ ViewComposers \ VueComposer;

VueComposerController 扩展了 Controller
{
/ **
*制作Vue作曲家数组。
* @param \ Illuminate \ Http \ Request $ request
* @return \ Illuminate \ Http \ Response
* /
公共功能 make(Request $ request){

//初始化集合
$ composed = collect();
$ notFound = collect();

//验证请求
$ this-> validate($ request, array
'composers'=>'array'
));
  //制作Composer类 
$ class = app()-> make(VueComposer :: class );
  //循环请求的作曲家 
foreach ($ request-> get('composers') as $ composer => $ args){
如果 (method_exists($ class,$ composer)){

//将键控结果放入集合中
$ composed-> put($ composer,$ class-> $ composer($ args));
} 其他 {

//将Composer推送至NotFound Collection
$ notFound-> push($ composer);
}
}
返回响应(compact('composed','notFound'));
}
}

添加:ViewComposer类

我们的视图编写器类将存储我们可以调用的方法,以构建组件所需的数据集。 我们可以创建一个Laravel API Resource类来转换我们的数据,以用于专用的Vue组件。 在我的示例中,我使用Quasar Framework并返回类别的QSelect集合。
https://laravel.com/docs/5.5/eloquent-resources#resource-responses

  <?php名称空间 App \ Http \ ViewComposers; 
使用 App \ Category;
使用 Illuminate \ Http \ Request;
  VueComposer  
{
公开的 $ request;
  / ** 
*类别选择
* @param $ args对象
* @返回 对象(类星体/ QSelect)
* /
公共功能 categorySelect( $ args ){
返回 QSelectCategory :: 集合 (Category :: all ());
}
  } 

示例类星体选择JsonResponse变压器

  <?php名称空间 App \ Http \ Resources; 
使用 Illuminate \ Http \ Resources \ Json \ Resource;
QSelectCategory 扩展资源
{
/ **
*将资源集合转换为数组。
* @param \ Illuminate \ Http \ Request $ request
* @返回 数组
* /
公共函数 toArray($ request)
{
返回 [
'值'=> $ this-> id,
'标签'=> $ this-> name,
];
}
}

向您的测试Vue组件添加:loadVueComposers()方法

现在,您可以请求作曲家的类方法,并将参数传递给它。 将解析响应,并将数据分配给您已配置的本地状态或VueX $ store突变。 *请注意,在此示例中,您的商店变异或本地数据属性应与composer类方法命名相同。

  / **从API加载Vue作曲家** / 
loadVueComposers(){
让vm = this
  这个 。$ http.post($ api.routes.vueComposers,{ 
作曲家:{
selectCategories:{param:'xyz'},//测试组成
willNotBeFound:{param:'abc'} //未找到测试
}
})
.then((response)=> {
console.log('vueComposer:composed',response.data)

//提交作曲家
如果 (response.data.hasOwnProperty('composed')){
键= Object.keys(组成)
如果 (!keys.length){
返回 Promise.reject( new Error('VueComposer Failed。'))
}
keys.forEach( 函数 (编写程序){
  // VueX $ store 
//vm.$store.commit(composer,composition [composer])
  //本地状态 
vm.vueComposers [composer] =组成的[composer]
})
}
  }) 
.catch((错误)=> {
console.log('vueComposer:error',错误)
})
  } // 

初始化loadVueComposers() 方法

  beforeMount(){ 
这个 .loadVueComposers()
}

更进一步:

如果您像我一样使用axios,则可以设置一个响应拦截器,该拦截器将在每次请求后始终查找您的vueComposer响应。 我让你去弄清楚😉