如何将WordPress初始值传递至Vuex？Vue对接WP遇阻求助

看起来你遇到的核心问题是wp_localize_script生成的全局变量没有被Vue正确获取，以及不知道如何把这些值传入Vuex Store。我来一步步帮你解决：

问题根源 #

wp_localize_script会把你定义的initialvaluestovue对象挂载到浏览器的全局window对象上，而不是直接在Vue的作用域里可用。你直接在main.js里写initialvaluestovue会导致变量未定义的错误。

解决方案步骤 #

1. 正确获取全局变量 #

首先在main.js里，通过window.initialvaluestovue拿到WordPress传递过来的初始值：

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

Vue.config.productionTip = false

// 从window对象获取WordPress传入的初始值
const wpInitialValues = window.initialvaluestovue || {}

new Vue({ 
  store, 
  render: h => h(Archive), 
  // 通过propsData把值传给根组件
  propsData:{ 
    wpInitialValues 
  } 
}).$mount('#archive_using_vuejs')

2. 在Vue组件中接收并同步到Vuex #

接下来在你的Archive.vue组件里，先定义props接收这个值，然后在组件生命周期钩子中把slug提交到Vuex Store：

<template>
  <!-- 你的组件内容 -->
</template>

<script>
export default {
  props: {
    wpInitialValues: {
      type: Object,
      // 设置默认值避免空值报错
      default: () => ({ slug: '', ajaxurl: '' })
    }
  },
  created() {
    // 将slug同步到Vuex
    this.$store.commit('updateSlug', this.wpInitialValues.slug)
    // 同时也可以把ajaxurl存进去
    this.$store.commit('updateAjaxUrl', this.wpInitialValues.ajaxurl)
  }
}
</script>

3. 在Vuex Store中定义对应的状态和Mutations #

打开你的Vuex Store文件（比如store/index.js），添加对应的state和mutations来存储这些值：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    currentSlug: '',
    ajaxUrl: ''
  },
  mutations: {
    updateSlug(state, payload) {
      state.currentSlug = payload
    },
    updateAjaxUrl(state, payload) {
      state.ajaxUrl = payload
    }
  },
  // 如果你需要在组件中获取这些值，可以添加getters
  getters: {
    getCurrentSlug: state => state.currentSlug,
    getAjaxUrl: state => state.ajaxUrl
  }
})

4. 可选：直接初始化Vuex Store时传入值 #

如果你不想通过组件props中转，也可以在创建Store的时候直接传入初始值：

修改store/index.js为一个工厂函数：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 接收初始值作为参数
export default function createStore(initialValues) {
  return new Vuex.Store({
    state: {
      currentSlug: initialValues.slug || '',
      ajaxUrl: initialValues.ajaxurl || ''
    },
    mutations: {
      updateSlug(state, payload) {
        state.currentSlug = payload
      },
      updateAjaxUrl(state, payload) {
        state.ajaxUrl = payload
      }
    }
  })
}

然后在main.js中创建Store时传入值：

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

Vue.config.productionTip = false

const wpInitialValues = window.initialvaluestovue || {}
// 传入初始值创建Store
const store = createStore(wpInitialValues)

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

关键检查点 #

• 确保在WordPress中先调用wp_localize_script，再调用wp_enqueue_script，你的Archive.php里已经做了register，但别忘了添加wp_enqueue_script('archive-vue');来加载脚本，否则变量不会被注入到页面中。
• 在浏览器控制台输入window.initialvaluestovue，确认这个对象存在且包含正确的slug和ajaxurl值，排除WordPress端的传递问题。

内容的提问来源于stack exchange，提问作者SD433