Блог

Я новичок в VueX. Проблема здесь в том :

1. Я не могу использовать getter для доступа к моему состоянию store.js . Я могу использовать this.$store.state.java , но я не могу использовать this.$store.getters.semuaJasa , как только я изменю код с помощью геттеров, он не будет отображаться в браузере.
2. Я не могу изменить значение состояния. Даже если я добавляю больше элементов в jasa массив, на выходе остаются четыре элемента, которые я пишу в первый раз.

Вот мой полный код :

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>
  

Это мое дерево каталогов

Я застрял на несколько часов, найдя некоторую информацию через Google, но это не помогает. Я действительно ценю все ваши ответы. Вы также можете получить доступ к моему репозиторию github, если необходимо Упражнение 3

Пожалуйста, попробуйте консоль.зарегистрируйте this переменную ur в компоненте ur, где вы вызываете геттеры, как то, что я делаю ниже, возможно, вы не понимаете область видимости javascript. Потому что я делаю именно то, что вы делаете, и это работает. Удачи!

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

смотрите Вывод консоли из того, что я делаю

Вот что произошло :

Я не понимаю, что у меня есть дубликат store.js в той же папке с main.js папкой и внутри папки хранилища. В main.js I do import { store } from './store/store' это означает, что я импортирую const именованную переменную из store.js внутренней папки хранилища, и она работает нормально.

Но в текстовом редакторе я фактически редактирую другое store.js , чего нет в папке хранилища. Итак, ошибка не отображается, потому что ошибки нет. Я просто слишком сильно запутался и не понимаю, что я делаю. Итак, теперь я заменяю store.js внутреннюю папку хранилища другой, которую я открываю в текстовом редакторе, и все в порядке.

Спасибо за все ваши ответы, я действительно ценю.