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>