时间戳

首页 > 解决方案 > 将初始值从 wordpress 传递到 vuex

wordpress - 将初始值从 wordpress 传递到 vuex

问题描述

我正在使用 vuejs 在 wordpress 网站上构建自定义分类登录页面。我正在使用 vuex 进行状态管理，但目前遇到了一个问题。对于像“slug”这样的几个变量，我不知道如何将初始值传递给商店。我正在使用 wp_localize_script 从 wordpress 发送值，但 vuejs 无法识别该变量。

存档.php

wp_register_script( 'archive-vue-chunk', THEME_JAVASCRIPT_URI . '/archive_js/dist/assets/chunk-vendors.js',array('site-2017'),null,true);
wp_register_script( 'archive-vue', THEME_JAVASCRIPT_URI . '/archive_js/dist/assets/app.js',array('archive-vue-chunk'),null,true);
$term  = get_queried_object();
$slug  = $term->slug; 

wp_localize_script ( 'archive-vue', 'initialvaluestovue', array (
    'ajaxurl' => admin_url ( 'admin-ajax.php' ),
    'slug'    => $slug 
    ) );

main.js


import Vue from 'vue'
import Archive from './Archive.vue'
import store from './store'


Vue.config.productionTip = false 

new Vue({
  store,
  render: h => h(Archive),
  propsData:{ initialvaluestovue }
}).$mount('#archive_using_vuejs')

很感谢任何形式的帮助。谢谢

标签： wordpressvue.jsvuex

解决方案

我将 main.js 更改为如下，并且能够在 Archive.vue 中获取值

main.js

new Vue({
store,
 render: h => {
   const context = {
   props: {
     initialvaluestovue : window.initialvaluestovue
   }
 };
 return h(Archive, context)
}   
}).$mount('#archive_using_vuejs')

我能够在 archive.vue 中显示 pass 对象

存档.vue

<template>
<div class="layout">{{initialvaluestovue}}</div>
</template>


<script>
export default {
name: 'Archive',    
props:{
    initialvaluestovue:{
        type: Object
    }
 }
}
</script>

推荐阅读