根据 wordpress 页面模板 NuxtJs 更改布局

Posted 2023-02-22

【中文标题】根据 wordpress 页面模板 NuxtJs 更改布局

【英文标题】：Change layout according to wordpress page template NuxtJs

【发布时间】：2020-04-24 00:01:45

【问题描述】：

我想根据 wordpress 页面模板获取更改布局（我使用 rest api 获取数据）

API 数据

  "id": 47, 
  "template": "test.php",    // need vue template according this 

export default  
  validate ( params ) 
    return !isNaN(+params.id)
  ,
  async asyncData ( params, error ) 
    return fetch('http://wordpress.local/wp-json/wp/v2/'+params.postType+'/'+params.id)
      .then(response => response.json())
      .then(res => 
          return  users: res  
      )
  ,
  layout ()  
    return 'blog' // Change here according to wordpress page template 
  ,

【问题讨论】：

应该是return fetch('http://wordpress.local/wp-json/wp/v2/'+params.template+'/'+params.id)而不是return fetch('http://wordpress.local/wp-json/wp/v2/'+params.postType+'/'+params.id)？

我如何将它传递到布局中？

根据文档，布局可以是一个函数：nuxtjs.org/api/pages-layout，你有没有尝试使用 fetch 调用？

@jumper85 看看我的代码我试试这个。但我无法根据页面从 api 传递选定的布局或在 vue 布局中发布

你是对的，在家里测试了这个，它没有工作，因为布局不能是异步的。我用我成功测试的另一种方法创建了一个答案，希望这会有所帮助

【参考方案1】：

我找到了一种方法，可以将一些东西从中间件传递到存储，您可以在布局函数中使用它。这是我整理的基本示例。

middleware/get-layout.js我这里模拟了一个异步调用，例如也可能是 axios.post() 的结果

export default async (ctx) => 
    return new Promise((resolve, reject) => 
        // you can also access ctx.params here
        ctx.store.commit('setLayout', 'new');
        resolve();
    );

store/index.js这里没什么疯狂的

export const state = () => (
    layout: ''
)

export const mutations = 
    setLayout(state, layout) 
        state.layout = layout;
    

可以为nuxt.config.js 中的每个路由全局注册中间件，也可以只为需要此逻辑的页面注册。

最终在页面组件layout属性中使用：

layout(ctx) 
  return ctx.store.state.layout;

我在layout 文件夹中使用new.vue 对其进行了测试。