时间戳

首页 > 解决方案 > Vue、Vuex 和远程存储

javascript - 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）来说太冗长了。我相信这样一个简单的模板应该已经解决了，并且有更简单的实现方式。

标签： javascriptvue.jsaxiosvuex

解决方案

这是一个例子：

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

推荐阅读