Vue 缓存 SSR 状态

时间:2021-03-18 11:33:01

标签: javascript vue.js vuejs2 vuex server-side-rendering

我有两台用于开发和测试应用程序的构建机器,我的构建是在 AWS Codebuild 上生成的

我向我的商店添加了新状态(退款请求)

国家代码

import { http } from 'services'

// initial state
const state = () => ({
    all: [],
    active: {},
    errors: null
  })
  
  // getters
  const getters = {
    
  }
  
  // actions
  const actions = {
    ['refundRequests.getAll'] ({ commit }, params) {
      if (!params._q) params._q = null
  
      commit('CLEAR_ERRORS')
  
      return (http.get('refund-requests', {
        params
      })).then ((res) => {
        commit('GET_ALL_REFUND_REQUESTS', res);
      })
      .catch ((res) => {
        commit('REFUND_REQUESTS_ERROR', res);
      })
    },

    ['refundRequests.get'] ({ commit }, id) {
      commit('CLEAR_ERRORS')
  
      return (http.get(`refund-requests/${id}`)).then ((res) => {
        commit('GET_REFUND_REQUEST', res);
      })
      .catch ((res) => {
        commit('REFUND_REQUESTS_ERROR', res);
      })
    },
    
    ['refundRequests.update'] ({ commit }, {id, data}) {
      commit('CLEAR_ERRORS')
  
      return (http.put(`refund-requests/${id}`, data)).then ((res) => {
        commit('UPDATE_REFUND_REQUEST', res);
      })
      .catch ((res) => {
        commit('REFUND_REQUESTS_ERROR', res);
      })
    },
    
    ['refundRequests.newComment'] ({ commit }, {id, data}) {
      commit('CLEAR_ERRORS')
  
      return (http.post(`refund-requests/${id}/comments`, data)).then ((res) => {
        commit('NEW_REFUND_REQUEST_COMMENT', res);
      })
      .catch ((res) => {
        commit('REFUND_REQUESTS_ERROR', res);
      })
    },

    ['refundRequests.add'] ({commit}, {chId, id, data, files}) {
        commit('CLEAR_ERRORS');
        let config = {
          headers: {
            'Content-Type': '',
          },
          "processData": false,
          "contentType": false,
          "mimeType": "multipart/form-data",
        };
        let formData = new FormData();
        if (files.length) {
          for (let i = 0; i < files.length; i++) {
            formData.append(`files[${i}]`, files[i]);
          }
        }
        formData.append('amount', data.amount);
        formData.append('notes', data.notes);

        return (http.post(`channels/${chId}/reservations/${id}/refund-requests`, formData, config))
        .then ((res) => {
            commit('NEW_REFUND_REQUEST', res);
        })
        .catch ((res) => {
            commit('REFUND_REQUESTS_ERROR', res);
        })
    },

  }
  
  // mutations
  const mutations = {

    GET_ALL_REFUND_REQUESTS (state, res) {
      state.all = res.data;
    },

    GET_REFUND_REQUEST (state, res) {
      state.active = res.data;
    },

    NEW_REFUND_REQUEST_COMMENT (state, res) {
      state.active.comments.push(res.data);
      state.active = _.cloneDeep(state.active);
    },

    UPDATE_REFUND_REQUEST (state, res) {
      state.active.status = res.data.status;
      if (res.data.comment) {
        state.active.comments.push(res.data.comment);
        state.active = _.cloneDeep(state.active);
      }
    },

    NEW_REFUND_REQUEST (state, res) {
        state.active = _.assign(state.active, res.data);
    },

    //ERRORS
    REFUND_REQUESTS_ERROR (state, err) {
        try {
            state.errors = err.response.data;
        } catch (e) {
            state.errors = err;
        }
    },

    CLEAR_ERRORS (state) {
      try {
        state.errors = null
      } catch (e) {}
    }
  }
  
  export default {
    state,
    getters,
    actions,
    mutations
  }
  

我加载要存储的状态的代码

import refundRequests from './modules/refundRequests'

export function createStore () {
  const debug = process.env.NODE_ENV !== 'prod'
  return new Vuex.Store({
    actions,
    getters,
    mutations,
    modules: {
      old_states, // works well
      refundRequests, // new state
      //NOTE: !!!DO NOT CHANGE AFTER THIS LINE!!!
      title
    },
    strict: debug,
  })
}

这一切都在本地和开发服务器上运行良好 当我将代码上传到测试服务器时(测试服务器完全相同的开发服务器,只有 ENV 变量发生了变化) 我的新状态未加载 在我调查之后,window.__INITIAL_STATE__ 返回时没有我的新状态 它似乎存在 SSR 缓存状态、突变和动作

import Vue from 'vue'
import VueHtml5Editor from 'vue-html5-editor'
import Vue2Filters from 'vue2-filters'
import { createApp } from './app';
import { beforeRouteUpdateMixin, beforeRouteEnterMixin } from './entry.mixins'

Vue.use(VueHtml5Editor);
Vue.use(Vue2Filters);

Vue.mixin(beforeRouteEnterMixin())
Vue.mixin(beforeRouteUpdateMixin())

const {app, store, router} = createApp();

console.log('client loaded successfully');

if (window.__INITIAL_STATE__ != 'init_state') {
  store.replaceState(window.__INITIAL_STATE__)
  console.log('__INITIAL_STATE__', window.__INITIAL_STATE__);
}

如何清除 Vue SSR 的现金以加载新状态?即使我删除一些旧状态并打印 window.__INITIAL_STATE__ ,它仍然打印已删除的旧状态 有什么我可以做的吗?

0 个答案:

没有答案
相关问题