vue.js - Getters 不工作，状态值不能在 Vuex 中改变

问题描述

我是 VueX 的新手。这里的问题是：

我无法使用 getter 访问我的状态store.js。我可以使用this.$store.state.java但我不能使用this.$store.getters.semuaJasa，一旦我使用 getter 更改代码，它就不会显示在浏览器中。
我不能改变状态的价值。即使我向jasa数组中添加了更多项目，输出仍然是我第一次编写的四个项目。

这是我的完整代码：

包.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;
            }
        }
    })

应用程序.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>

这是我的目录树

我坚持了几个小时，通过谷歌找到了一些信息，但这无济于事。我非常感谢您的所有回复。如果需要，您还可以访问我的 github 存储库练习 3

标签： vue.jswebvuex

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

vue.js - Getters 不工作，状态值不能在 Vuex 中改变

问题描述

解决方案

推荐阅读