Getters is not working and state value cannot be change in Vuex

Question

I am new to VueX. The problem here is :

1. I cannot use getter to access my state in store.js. I can use this.$store.state.java but I can't use this.$store.getters.semuaJasa, once I change the code using getters, it won't display in the browser.
2. I can't change the value of state. Even I add more items to the jasa array, the output still four items which I write for the first time.

Here is my full code :

package.json

    {
      "name": "PhilipPurwoko",
      "description": "project hari ke 3",
      "version": "1.0.0",
      "author": "Philip Purwoko <Philippurwoko123@gmail.com>",
      "license": "MIT",
      "private": true,
      "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
      },
      "dependencies": {
        "vue": "^2.5.11",
        "vuex": "^3.5.1"
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ],
      "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.6.0",
        "babel-preset-stage-3": "^6.24.1",
        "cross-env": "^5.0.5",
        "css-loader": "^0.28.7",
        "file-loader": "^1.1.4",
        "vue-loader": "https://github.com/graux/vue-loader#a0d6b77",
        "vue-template-compiler": "^2.4.4",
        "webpack": "^3.6.0",
        "webpack-dev-server": "^2.9.1"
      }
    }

main.js

    import Vue from 'vue'
    import App from './App.vue'
    import { store } from './store/store'
    
    export const bus = new Vue();
    
    new Vue({
        store:store,
        el: '#app',
        render: h => h(App)
    })

store.js

    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    export const store = new Vuex.Store({
        state:{
            jasa:[
                {nama:'Desain Poster',harga:50000,diskon:false},
                {nama:'Desain Vector',harga:80000,diskon:false},
                {nama:'Machine Learning',harga:200000,diskon:false},
                {nama:'Web Development',harga:100000,diskon:true},
                {nama:'Desain Poster 2',harga:50000,diskon:false},
                {nama:'Desain Vector 2',harga:80000,diskon:false},
                {nama:'Machine Learning 2',harga:200000,diskon:false},
                {nama:'Web Development 2',harga:100000,diskon:true}
            ]
        },
        getters:{
            semuaJasa:state=>{
                return state.jasa;
            }
        }
    })

App.vue

    <template>
        <main>
            <app-header></app-header>
            <identitas></identitas>
            <impression></impression>
            <sertifikasi></sertifikasi>
            <divider></divider>
            <pesan></pesan>
            <jasa></jasa>
            <app-footer></app-footer>
        </main>
    </template>
    
    <script>
    import Header from "./components/Header.vue"
    import Footer from "./components/Footer.vue"
    import Identitas from './components/Identitas.vue'
    import Sertifikasi from './components/Sertifikasi.vue'
    import Impression from './components/Impression.vue'
    import Pesan from './components/Pesan.vue'
    import Divider from './components/Divider.vue'
    import Jasa from './components/Jasa.vue'
    export default {
        components:{
            'app-header':Header,
            'app-footer':Footer,
            'identitas':Identitas,
            'sertifikasi':Sertifikasi,
            'impression':Impression,
            'pesan':Pesan,
            'divider':Divider,
            'jasa':Jasa
        }
    };
    </script>
    
    <style scoped>
    </style>>

Jasa.vue

    <template>
        <section>
            <h2>Jasa</h2>
            <section class="card-container">
                <template v-for="jasa in semuaJasa">
                    <article class="card">
                        <p><strong>{{ jasa.nama }}</strong></p>
                        <p>IDR {{ jasa.harga }}</p>
                    </article>
                </template>
            </section>
        </section>
    </template>
    
    <script>
        export default {
            computed:{
                semuaJasa(){
                    return this.$store.state.jasa;
                }
            }
        };
    </script>
    
    <style scoped>
        .card-container{
            display:flex;
            flex-wrap: wrap;
        }
        .card{
            margin: 10px;
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
    </style>

This is my directory tree

I stuck for a few hour, finding some information via google but that doesn't help. I really appreciate for all of your responses. You can also access my github repository if needed Excercise 3

Answer 1

This is what happened :

I don't realize that I have duplicate store.js in same folder with main.js folder and inside the store folder. In main.js I do import { store } from './store/store' which mean I import the const named variable from the store.js inside the store folder, and it is working normally.

But in the text editor, I actually editing the other store.js that not in the store folder. So, there is no error shown because there is no error. I am just too much confused and don't realize what I am doing. So now I replace the store.js inside the store folder with the other one that I open in the text editor and everything is ok.

Thanks for all of your response, I really appreciate.

Answer 2

Please try console.log ur this variable on ur component where you call the getters like what i do below, maybe you doesn't understanding the javascript scoping. Because i've do exactly what you do and it's work. Good luck!

computed: {
        allJasa() {
            return this.$store.getters.jasas;
        },
        cek: () => this,
        cekHot() { return this; },
    },

    mounted() {
        console.log({
            allJasa: JSON.parse(JSON.stringify(this.allJasa)),
            cek: this.cek,
            cekHot: this.cekHot,
        });
    },

see console output from what i do