vuex 스토어에서 JSON 데이터를 사용하는 방법(웹 팩 없음)

vuex 스토어에서 JSON 데이터를 사용하는 방법(웹 팩 없음)

첫 번째 vuex 저장소를 성공적으로 설정했습니다.저장소에서 원하는 컴포넌트로 데이터 배열이 전달되어 올바르게 렌더링된다.이제 JSON 파일에서 데이터를 가져오고 싶은데 제대로 작동하지 않습니다.웹 팩을 사용하지 않습니다. 왜냐하면 이러한 도구를 사용할 수 없는 환경에서 프로젝트를 수행해야 할 경우가 있기 때문입니다.

다음은 JSON 파일에서 데이터를 가져오지 않고 작동합니다.

스토어

Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        products: [
            { name: "Avocado Zwem Ring", inventory: 47, unit_price: 77, image:"a.jpg", new:true },
            { name: "Danser Skydancer", inventory: 5, unit_price: 45.99, image:"a.jpg", new:true}
        ]
    },
});

SHOP.VUE

<template>
    <comp-products v-bind:products="products"></comp-products>
</template>
<script>
module.exports = {
    components: {
        'comp-products': httpVueLoader('components/comp-products.vue')
    },
    computed:{
        products(){ 
            return this.$store.state.products
        }
    }
}
</script>

다음을 시도했지만 아무것도 렌더링되지 않고 오류가 반환되지 않습니다.

스토어

Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        products: [], 
    },
    mounted() {
        axios
        .get("json/products.json")
        .then(response => {
            this.products = response.data.products;
        })            
    },
});

SHOP.VUE

<template>
    <comp-products v-bind:products="products"></comp-products>
</template>
<script>
module.exports = {
    components: {
        'comp-products': httpVueLoader('components/comp-products.vue')
    },
    computed:{
        products(){ 
            return this.$store.state.products
        }
    }
}
</script>

products.json

{
    "products":[
      {
        "sku":"1",
        "name": "Danser Skydancer",
        "inventory": 5,
        "unit_price": 45.99,
        "image":"a.jpg",
        "new":true
      },
      {
        "sku":"2",
        "name": "Avocado Zwem Ring",
        "inventory": 10,
        "unit_price": 123.75,
        "image":"b.jpg",
        "new":false
      }]
}

vuex 스토어를 사용하지 않고 json 데이터를 검색 및 렌더링할 수 있었기 때문에 json 파일에 대한 경로와 axios 설정은 정확하다고 확신합니다.

저장소에서 변수를 설정하려면 돌연변이를 사용해야 합니다.스토어 셋업 후 api를 호출한 후 결과 데이터로 스토어상의 돌연변이를 호출합니다.

Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        products: [], 
    },
    mutations: { //Mutations are like setters
        SET_PRODUCTS: (state, products) => { //capitalization is good-practice for vuex-mutations
            state.products = products;
        }
    }
});

const setProductToStore = () => {

    axios
    .get("json/products.json")
    .then(response => {
        store.commit('SET_PRODUCTS', response.data.products);
    })   
}

setProductToStore();

이런 게 효과가 있을 거야

다음과 같이 data.json 파일을 간단하게 Import할 수도 있습니다.

import data from './data';

export default new Vuex.Store({
    state: {
        test: data
    }
});

언급URL : https://stackoverflow.com/questions/56075612/how-do-i-use-json-data-with-vuex-store-no-webpack