Question

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

我无法使用getter访问store.js中的状态。我可以使用this.$store.state.java，但是不能使用this.$store.getters.semuaJasa，一旦使用getter更改代码，它就不会显示在浏览器中。
我无法更改state的值。即使我将更多项目添加到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存储库 Excercise 3

Answer 1

请尝试在您的组件上调用console.log ur this变量，您可以像下面我所说的那样调用吸气剂，也许您不了解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,
        });
    },

see console output from what i do

Answer 2

这就是发生的事情：

我没有意识到我在与store.js文件夹相同的文件夹中以及在存储文件夹中复制了main.js 。在main.js中，我执行import { store } from './store/store'，这意味着我从商店文件夹内的const导入了store.js命名变量，并且它正常工作。

但是在文本编辑器中，我实际上在编辑不在存储文件夹中的其他store.js。因此，没有显示错误，因为没有错误。我太困惑了，不知道我在做什么。因此，现在我用在文本编辑器中打开的另一个文件夹替换了存储文件夹中的store.js，一切正常。

非常感谢您的回复。

吸气剂无法正常工作，并且无法在Vuex中更改状态值

2 个答案: