能否脱离Vue使用Vuex？（Vuex服务端部署可行性探讨）

Great question! That error makes total sense because Vuex 3 (built for Vue 2) is tightly coupled to the Vue instance and requires Vue.use(Vuex) to set up necessary integrations. But sharing store logic between frontend and backend is totally feasible—here are two solid approaches depending on your Vuex version:

For Vuex 3 (Vue 2) #

Since Vuex 3 enforces the Vue.use(Vuex) check when creating a Store instance, you’ll need to decouple your core state logic from Vuex itself. Here’s how to pull it off:

• Create a plain JavaScript core store
  This holds all your state, mutations, actions, and basic commit/dispatch logic—no Vue or Vuex dependencies required:

  // store-core.js
  const initialState = {
    count: 0,
    user: null
  };
  
  let state = { ...initialState };
  
  const mutations = {
    increment(state) {
      state.count++;
    },
    setUser(state, user) {
      state.user = user;
    }
  };
  
  const actions = {
    async fetchUser({ commit }, userId) {
      // Replace with your actual API logic
      const user = await fetch(`/api/users/${userId}`).then(res => res.json());
      commit('setUser', user);
    }
  };
  
  export const coreStore = {
    get state() { return { ...state }; }, // Return a copy to prevent direct mutation
    commit(type, payload) {
      if (mutations[type]) {
        mutations[type](state, payload);
      }
    },
    async dispatch(type, payload) {
      if (actions[type]) {
        await actions[type]({ commit: this.commit.bind(this), state }, payload);
      }
    },
    reset() {
      state = { ...initialState };
    }
  };
  

• Wrap it in Vuex for the frontend
  In your Vue 2 app, use Vuex as usual but reuse the core logic to keep everything in sync:

  // store.js (frontend)
  import Vue from 'vue';
  import Vuex from 'vuex';
  import { coreStore } from './store-core';
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    state: coreStore.state,
    mutations: coreStore.mutations,
    actions: coreStore.actions
  });
  

• Use the core store directly in the backend
  No Vue or Vuex setup needed here—just import and use the core methods:

  // backend.js
  import { coreStore } from './store-core';
  
  // Sync mutation
  coreStore.commit('increment');
  console.log(coreStore.state.count); // 1
  
  // Async action
  await coreStore.dispatch('fetchUser', 123);
  console.log(coreStore.state.user); // Your fetched user object
  

For Vuex 4 (Vue 3) #

Vuex 4 redesigned store creation with createStore, which removes the requirement for Vue.use(Vuex) (that step is replaced with app.use(store) in Vue 3 apps). This makes sharing the store way simpler:

• Create a standard Vuex store

  // store.js
  import { createStore } from 'vuex';
  
  export default createStore({
    state() {
      return {
        count: 0,
        user: null
      };
    },
    mutations: {
      increment(state) {
        state.count++;
      },
      setUser(state, user) {
        state.user = user;
      }
    },
    actions: {
      async fetchUser({ commit }, userId) {
        const user = await fetch(`/api/users/${userId}`).then(res => res.json());
        commit('setUser', user);
      }
    }
  });
  

• Use it in the frontend
  Mount it to your Vue 3 app as normal:

  // main.js (frontend)
  import { createApp } from 'vue';
  import App from './App.vue';
  import store from './store';
  
  const app = createApp(App);
  app.use(store);
  app.mount('#app');
  

• Use it directly in the backend
  No extra setup required—just import the store and call its methods:

  // backend.js
  import store from './store';
  
  store.commit('increment');
  console.log(store.state.count); // 1
  
  await store.dispatch('fetchUser', 123);
  console.log(store.state.user); // Your fetched user object
  

Key Notes #

• State Isolation for Servers: If you’re using this in a server environment (like Node.js), avoid shared singleton state—each request should get its own store instance to prevent cross-request contamination. For Vuex 4, you can export a factory function instead of a singleton:

  // store.js (Vuex 4 server-friendly)
  import { createStore } from 'vuex';
  
  export function createNewStore() {
    return createStore({
      // Same state/mutations/actions as before
    });
  }
  

  Then in the backend:

  const store = createNewStore();
  // Use this store instance for the current request
  

内容的提问来源于stack exchange，提问作者Wolf