Javascript Vue变量在Vuex中不可访问

我在

Vue

中定义了一个名为

$shopifyClient

的变量，该变量在

Vuex

中不可访问。如何使该变量可访问

Vue.$shopifyClient.addLineItems('1234', lineItems).then((checkout) => {
    console.log(checkout.lineItems)
})

返回

TypeError:无法读取未定义的属性'addLineItems'，因此我假设它无法检索
$shopifClient

main.js
您可以在
Vuex
存储中声明
$shopifyClient
，如下所示：

//Store.js

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

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    lineItems: { },
    $shopifyClient: new Client(
      new Config({
        domain: 'some-page.myshopify.com',
        storefrontAccessToken: '123456'
     })
)
  },
  actions: {
    addToCart ({ commit, state }) {
      var lineItems = [{variantId: '12345==', quantity: 2}]
      state.$shopifyClient.addLineItems('1234', lineItems).then((checkout)     => {
        console.log(checkout.lineItems)
      })
    }
  }
})


// vue component
//you can access it like below

this.$root.$store.state.$shopifyClient;

据我所知，你不能那样进入。你想要实现什么？是否要将所有提取的lineItems存储在vuex store中？该操作基本上会向shopify发送一条帖子，将该项添加到签出实例中，并返回包含新内容的新签出对象。然后将内容添加到存储区。我不确定，但您可以尝试将
$shopifyClient
直接存储在vuex存储区变量中，然后使用它？通过这种方式，您可以从任何vue组件和店内操作访问它。嗯，我并没有真正想到这一点，但这可能是一种方法，但我也将在其他组件中使用它，因此我可能会有两个不同的对象，一个在vuex中，另一个在vue的全局范围内。正如我前面所说的，如果已在vuex存储中声明，则可以在其他组件中访问它。
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    lineItems: { }
  },
  actions: {
    addToCart ({ commit, state }) {
      var lineItems = [{variantId: '12345==', quantity: 2}]
      Vue.$shopifyClient.addLineItems('1234', lineItems).then((checkout) => {
        console.log(checkout.lineItems)
      })
    }
  }
})

//Store.js

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

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    lineItems: { },
    $shopifyClient: new Client(
      new Config({
        domain: 'some-page.myshopify.com',
        storefrontAccessToken: '123456'
     })
)
  },
  actions: {
    addToCart ({ commit, state }) {
      var lineItems = [{variantId: '12345==', quantity: 2}]
      state.$shopifyClient.addLineItems('1234', lineItems).then((checkout)     => {
        console.log(checkout.lineItems)
      })
    }
  }
})


// vue component
//you can access it like below

this.$root.$store.state.$shopifyClient;