Vuex 中无法访问 Vue 变量

Question

我在 Vue 中定义了一个名为 $shopifyClient 的变量，在 Vuex 中无法访问该变量。我如何使 thi 变量可访问？

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

returns TypeError: Cannot read property 'addLineItems' of undefined，所以我假设它无法检索 $shopifyClient。

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.prototype.$shopifyClient = new Client(
  new Config({
    domain: 'some-page.myshopify.com',
    storefrontAccessToken: '123456'
  })
)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})

store.js

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)
      })
    }
  }
})

Answer 1

您可以在 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;

Vuex 中无法访问 Vue 变量

Vue variable not accessible in Vuex

javascript

vuejs2

vuex

main.js

store.js