没有 Vue 可以使用 Vuex 吗? (Vuex 服务器端?)
Is it possible to use Vuex without Vue? (Vuex server-side?)
Vuex 抱怨如果不调用 Vue.use(Vuex) 就无法创建商店的新实例。虽然这通常没问题,但我正在摆弄使用同一商店编写 backend/frontend 的想法。有人知道答案吗?
谢谢。
TL;DR you can perfectly use Vuex in node (without a browser), even for unit testing. Internally, though, Vuex still uses some code from Vue.
没有 Vue 就无法使用 Vuex。因为:
- Vuex checks for the existence of Vue.
- Vuex depends largely on Vue for its reactivity inner workings.
也就是说,您确实需要 Vue,但是您不需要 Vue 实例。您甚至不需要浏览器。
所以是的,它在 server-side 中非常有用,独立。
例如,您可以 运行 使用 Node.js 如下:
创建示例项目:
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
Vuex 抱怨如果不调用 Vue.use(Vuex) 就无法创建商店的新实例。虽然这通常没问题,但我正在摆弄使用同一商店编写 backend/frontend 的想法。有人知道答案吗?
谢谢。
TL;DR you can perfectly use Vuex in node (without a browser), even for unit testing. Internally, though, Vuex still uses some code from Vue.
没有 Vue 就无法使用 Vuex。因为:
- Vuex checks for the existence of Vue.
- Vuex depends largely on Vue for its reactivity inner workings.
也就是说,您确实需要 Vue,但是您不需要 Vue 实例。您甚至不需要浏览器。
所以是的,它在 server-side 中非常有用,独立。
例如,您可以 运行 使用 Node.js 如下:
创建示例项目:
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