CODEWITHSUNDEEP
vue.js
HelloWorld
HelloWorld

Reputation: 1073

I can't access to Vuex data: using vue-cli webpack

Right now, I'm trying to show the contents of state object from store.js on my App.vue.

I've tried vuex examples on Medium and other website, but I'm keep failing: non of them worked: some of them even gave me a WebPack config error.

My App.vue

<template>
<div id="app">
<img src="./assets/logo.png">
<h1>TEST</h1>
</div>
</template>

<script>
import Store from './store/index'

export default {
name: 'App',
Store
}
</script>

My store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
state: {
alpha: ['1st data']
},
mutations: {
ADD ({ alpha }) {
  const beta = 'new!'
  state.alpha.push(beta)
   }
  }
})

My main.js

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './store/index'

Vue.config.productionTip = false

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

Upvotes: 0

Views: 1002

Answers (2)

V. Sambor
V. Sambor

Reputation: 13369

The problem is that in your main.js is missing Vue.use(veux)

you should have something like this:

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import store from './store'

Vue.use(Vuex) // <-- Add this

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

Upvotes: 0

user320487
user320487

Reputation:

You shouldn't be importing the store in App.vue. It only needs to be included in main.js and passed as an option when constructing the Vue instance. Within a component, the store is thereafter accessible via this.$store.

Second, your mutation should receive a context object as it's first parameter. context consists of properties such including state and commit. Those are the ways in which you access state within a mutation.

// notice context is the first parameter
mutations: {
    ADD (context, { param }) {
       const beta = 'new!'
       context.state.alpha.push(beta)
    })
}

// you can also deconstruct context like this
mutations: {
    ADD ({state}, { param }) {
       const beta = 'new!'
       state.alpha.push(beta)
    })
}

I also changed the way alpha to param. You don't receive the state's properties unless you destructure even further.

Upvotes: 1

Related Questions