Vuex抱怨说,如果不调用Vue,就无法创建存储的新实例.使用(Vuex).虽然一般来说这没什么问题,但我正在考虑使用同一个store 编写后端/前端.有人知道答案吗?

谢谢

推荐答案

TL;DR您可以在 node 中完美地使用Vuex(无需浏览器),甚至可以用于单元测试.不过在内部,Vuex仍然使用Vue中的一些代码.

没有Vue,就无法使用Vuex.因为:

也就是说,你确实需要Vue,但你需要don't require a Vue instance.你甚至不需要浏览器.

因此,是的,它在服务器端非常有用,是独立的.

例如,您可以使用Node运行它.具体如下:

  • 创建一个示例项目:

    npm init -y
    
  • 安装依赖项(注意:axios不是必需的,我们只是为了这个演示添加它):

    npm install --save vue vuex axios
    
  • 创建脚本(index.js):

    const axios = require('axios');
    const Vue = require('vue');
    const Vuex = require('vuex');
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
      strict: true,
      state: {name: "John"},
      mutations: {
        changeName(state, data) {
            state.name = data
        }
      },
      actions: {
        fetchRandomName({ commit }) {
          let randomId = Math.floor(Math.random() * 12) + 1  ;
          return axios.get("https://reqres.in/api/users/" + randomId).then(response => {
            commit('changeName', response.data.data.first_name)
          })
        }
      },
      getters: {
        getName: state => state.name,
        getTransformedName: (state) => (upperOrLower) => {
          return upperOrLower ? state.name.toUpperCase() : state.name.toLowerCase()
        }
      }
    });
    console.log('via regular getter:', store.getters.getName);
    console.log('via method-style getter:', store.getters.getTransformedName(true));
    
    store.commit('changeName', 'Charles');
    console.log('after commit:', store.getters.getName);
    
    store.dispatch('fetchRandomName').then(() => {
        console.log('after fetch:', store.getters.getName);
    });
    
  • 运行它:

    node index.js
    
  • 它将输出:

    via regular getter: John
    via method-style getter: JOHN
    after commit: Charles
    after fetch: Byron
    

Vue.js相关问答推荐

过渡如何在 Vue JS 3 中的图像上工作?

在 VueJS 中,将变量而不是组件的字符串名称传递给动态组件的 :is 属性不起作用

组合 API | Vue 路由参数没有被监视

如何在 vue js 的一页路由下显示不同的 category._id

如何在Vue js 3中根据API响应替换react 值

TailwindCSS 为什么前者比后者重要?

从数据库中删除后,Vue.js $remove 不删除元素

如何使用 Vue 命名插槽呈现静态内容列表?

使用 Vue Js 运行 Jest 测试时出现语法错误:无法在模块外使用 import 语句

在下拉菜单上使用箭头键滚动

使用 azure devops 发布管道部署 Vue.js 应用程序

Vue路由保持活动和挂载行为

正确的 vueJS 方法将props与数据同步

vue 在 v-model 之后执行 @click

从我的服务访问路由实例

如何从 v-for 创建的对象中绑定多个类?

在Vue中单击路由链接上的激活方法

vue-cli-service build --target lib 导入为 lib 时丢失图像路径

从子组件 Vue 更新父模型

使用 vuex-persistedstate 仅使一个模块持久化