Vue，Vuex和远程存储

如何解决Vue，Vuex和远程存储

在远程存储中（应该说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）进行控制，它太冗长了。我确信这样一个简单的模板应该已经解决，并且具有更简单的实现方式。

解决方法

这里是一个例子：

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