Vue、Vuex 和遠程存儲

Question

那么 a 在遠程存儲（比如x ）和b-form-checkbox中有一些值應該控制這個值。 我想通知用戶值是否在存儲和發生時實際發生了變化。

所以基本上我想要：

1. 當用戶選中/取消選中b-form-checkbox我想更改b-form-checkbox ，將異步請求發送到遠程存儲並顯示一些b-spinner以指示狀態實際上尚未更改。

2. 當我從遠程存儲收到答復時：

   • 如果更改成功，只需隱藏b-spinner 。
   • 如果更改不成功（超時、服務器錯誤等），我想將b-form-checkbox狀態更改回（因為存儲上的值實際上沒有更改）並隱藏b-spinner

使用 Vue + Vuex 做 int 的最愚蠢的方法是什么？ 目前我是這樣做的：

xChanger.vue :

<template>
  <b-form-checkbox v-model="xComp" switch>
    {{xComp ? 'On' : 'Off'}}
    <b-spinner v-if="!xSynced"/>
  </b-form-checkbox>
</template>

<script>
  import { mapState, mapActions, mapGetters } from 'vuex';
  export default {
    name: 'XChanger',

    computed: {
      ...mapState(['x']),
      ...mapGetters(['xSynced']),

      xComp: {
        get() { return x.local },
        set(value) {
          if (value != this.x.local) {
            this.setX(value)
          }
        },
      },
    },
    methods: {
      ...mapActions(['setX']),
    },
  }
</script>

main.js

import Vuex from 'vuex'
import Axios from 'axios'

const store = new Vuex.Store({
  state: {
    x: {
      remote: null,
      local: null
    },
    getters: {
      xSynced(state) {
        state.x.local === state.x.remote
      }
    },
    actions: {
      async setX(store, value) {
        store.state.x.local = value
        try {
          let response = await Axios.post('http://blah.blah/setX', {x: value});
          if (response.status == 200) {
            store.state.x.remote = value
          }
        } catch (error) {
          store.state.x.local = !value
        }
      }
    },
    mutations: {
      setX(state, value) {
        state.x.local = value
        state.x.remote = value
      }
    }
  },
})

但是只控制一個值（尤其是計算屬性xComp ）太冗長了。 相信這么簡單的模板應該已經解決了，並且有更簡單的實現方式。

Answer 1

下面是一個例子：

<template>
  <b-form-checkbox v-model="x.local" switch>
    {{x.local ? 'On' : 'Off'}}
    <b-spinner v-if="saving"/>
  </b-form-checkbox>
</template>

<script>
  export default 
  {
    name: 'XChanger',
    data: () => ({
      x:
      {
        local: false,
        remote: false,
      },
      saving: false,
    }),
    watch:
    {
      'x.local'(newValue, oldValue)
      {
        if (newValue !== oldValue && newValue !== this.x.remote) 
        {
          this.updateRemote(newValue);
        }
      }
    }
    methods: 
    {
      async updateRemote(value)
      {
        try 
        {
          this.saving = true;
          const response = await Axios.post('http://blah.blah/setX', {x: value});
          if (response.status == 200) 
          {
            this.x.remote = value;
          }
          else
          {
            this.x.local = this.x.remote;
          }
        } 
        catch (error) 
        {
          this.x.local = this.x.remote;
        }
        this.saving = false;
      }
    },
  }
</script>