Question

在远程存储中（应该说x）和b-form-checkbox有一些应该控制该值的值。我想通知用户值在存储和时间上是否发生了实际变化。

所以基本上我想要：

当用户选中/取消选中b-form-checkbox时，我想更改b-form-checkbox的状态，将异步请求发送到远程存储，并显示一些b-spinner来指示状态不是真的改变了。
当我从远程存储收到答复时：
- 如果更改成功，则隐藏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>

Vue，Vuex和远程存储

1 个答案: