Vue плагин, делающий переменную состояния Vuex нереактивной - PullRequest
Новая
       57

Vue плагин, делающий переменную состояния Vuex нереактивной

0 голосов
/ 07 апреля 2020

Я пытаюсь создать плагин, который использует Ax ios для получения данных из моего API и сохранения их в переменной с именем "Cache" в моем свойстве состояния vuex.

Это мой плагин : 

import api from "../services/api"
import Store from "../store"
import Vue from "vue"


$this = new Vue()

let reloadCache = (param = "all") => {
    let cacheFunc = {
        async Clientes() {
            let clientes = await api.get("/clientes")
            $this.$set(Store.state.Cache, "Clientes", clientes.data)
        },
        async Produtos() {
            let produtos = await api.get("/produtos")
            $this.$set(Store.state.Cache, "Produtos", produtos.data)
        },
        async CondPgto() {
            let condpgto = await api.get("/condpgto")
            $this.$set(Store.state.Cache, "CondPgto", condpgto.data)
        }
    }

    let attrs = Object.keys(cacheFunc)

    if (param == "all") {
        attrs.forEach(async (attr) => {
            await cacheFunc[attr]()
        })

    } else {
        cacheFunc[param]()
    }
}

Vue.use({
    install(Vue) {
        Vue.prototype.$reloadCache = reloadCache
    },
})

И это упрощенная версия моего компонента, для демонстрационных целей, с простым UL, отображающим содержимое одной из этих переменных Cache, и кнопкой, которая выполняет мою функцию "reloadCache" . 


<template>
    <div>
        <button @click.prevent="reloadCache()">Update</button>
        <ul>
            <li v-for="(key, cliente) in Cache.Clientes" :key="key">
                {{ cliente.razao }} - {{ cliente.razao1 }}
            </li>
        </ul>
    </div>
</template>

<script>
import { mapState } from "vuex"
export default {
    computed: {
        ...mapState(["Cache"]),
    },
    methods: {
        reloadCache() {
            this.$reloadCache()
        },
    },
}
</script>

А это мой файл "store. js": 


import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        Cache: {}
    },

    getters: {},

    mutations: {},

    actions: {}
})

Моя проблема в том, когда я пытаюсь перезагрузить данные кеша из API.

Я могу видеть новые данные в списке, если я делаю console.log в Cache, но список не обновляется и продолжает отображать старые данные.

Возможно, я совершаю какую-то глупую ошибку, но я нигде не мог найти в Интернете, как правильно это сделать.

...