घटकों में Vuex राज्यों का उपयोग करने का प्रयास कर रहा है।
यह ठीक काम करता है:
main.js:

const store = new Vuex.Store({
  state: {
    counter: 1
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  }
})

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

और आंतरिक घटक:
<span>{{this.$store.state.test}}</span>


जब मैंने Vuex को एक अलग store.js में ले जाने का प्रयास किया, तो यह काम नहीं करता।
store.js (ठीक main.js के पास):

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 1
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  }
})

और घटक के अंदर मैं आयात करता हूं: import store from '../store',
उपयोग करने की कोशिश करने से: <span>{{store.state.test}}</span>
और मुझे मिलता है

संपत्ति या विधि "स्टोर" उदाहरण पर परिभाषित नहीं है

<span>{{this.$store.state.test}}</span> परिणाम

ध्यान में न आया संदर्भ त्रुटि: स्टोर परिभाषित नहीं है

मैंने export default new Vuex.Store({...}) को export const store = new Vuex.Store({...}) में बदलने की कोशिश की है, लेकिन इससे कोई फायदा नहीं हुआ।


पी. एस. यह मेरे लिए काम करता है:
आंतरिक घटक:

computed: {
      counter() {
        return store.state.counter
      }
    }

और <span>{{counter}}</span>.
लेकिन क्या computed गुणों का उपयोग किए बिना कोई और तरीका है? क्योंकि मैं विश्व स्तर पर इसके राज्यों को कॉल करने के लिए Vuex का उपयोग करता हूं, और यहां मुझे प्रत्येक घटक में कहीं भी computed परिभाषित करना है...

0
Tarasovych 19 सितंबर 2018, 01:02

2 जवाब

सबसे बढ़िया उत्तर

मैं इस तरह गया:
store.js:

export default new Vuex.Store({...})

main.js:

import store from './store'

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

किसी भी घटक के टेम्पलेट की तुलना में: <span>{{this.$store.state.counter}}</span>.

पुष्टि नहीं कर सकता कि यह सबसे अच्छा तरीका है, लेकिन यह मेरे लिए काम करता है।

0
Tarasovych 19 सितंबर 2018, 21:22

आपका निर्यात और आयात ES6 नियमों का पालन नहीं करते हैं, यदि आप export const store = new Vuex.Store({...}) का उपयोग कर रहे हैं आपको या तो इस तरह आयात करने की आवश्यकता है

import {store} from '../store.js'

यदि नहीं, तो अपना कोड इसमें अपडेट करें:

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

Vue.use(Vuex)

export default const store = new Vuex.Store({   state: {
    counter: 1   },   mutations: {
    increment(state) {
      state.counter++
    }   } })
0
Teddy McZieuwa 19 सितंबर 2018, 01:45