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