如何在 vuex 存储中使用 JSON 数据（无 webpack）答案

【问题标题】：How do I use JSON data with vuex store (no webpack)如何在 vuex 存储中使用 JSON 数据（无 webpack）
【发布时间】：2019-05-10 10:21:33
【问题描述】：

我成功地设置了我的第一个 vuex 商店。一组数据从存储传递到所需的组件并正确呈现。现在我想从 JSON 文件中获取我的数据，但不能让它工作。我没有使用 webpack，因为有时我需要在没有这些工具的环境中处理我的项目。

以下操作，无需从 JSON 文件中检索数据：

STORE.JS

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>

我尝试了以下方法，但它没有呈现任何内容，也没有返回错误。

STORE.JS

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
      }]
}

我确信 json 文件的路径和 axios 的设置是正确的，因为我设法在不使用 vuex 存储的情况下检索和呈现 json 数据。

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

要在商店中设置变量，您应该使用突变。设置存储后调用您的 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();

这样的事情应该可以工作。

【讨论】：

【解决方案2】：

也可以像这样简单地导入 data.json 文件：

import data from './data';

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

【讨论】：