一、Node.js环境下搭建Vuex的详细步骤 1.1 安装Vue CLI并创建项目 打开终端执行：npm install -g @vue/cli安装Vue CLI工具 创建新项目：vue create my-proje […]
- 一、Node.js环境下搭建Vuex的详细步骤
- 1.1 安装Vue CLI并创建项目
- 打开终端执行：
npm install -g @vue/cli安装Vue CLI工具 - 创建新项目：
vue create my-project，选择手动配置时勾选Vuex选项 - 1.2 手动集成Vuex模块
- 在项目根目录执行：
npm install vuex --save - 在src目录下新建
store/index.js文件 - 配置store实例：
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { increment({ commit }) { commit('increment') } }})import Vue from 'vue'import App from './App.vue'import store from './store'new Vue({ store, render: h => h(App)}).$mount('#app'){{ $store.state.count }}computed: { count() { return this.$store.state.count }}methods: { addCount() { this.$store.dispatch('increment') }}const express = require('express')const app = express()app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", "*") res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept") next()})app.get('/api/data', (req, res) => { res.json({ message: '跨域成功' })})app.listen(3000)$.ajax({ url: 'http://localhost:3000/api/data', type: 'GET', dataType: 'json', crossDomain: true, success: function(response) { console.log(response.message); }, error: function(xhr) { console.error('跨域失败:', xhr.statusText); }});app.get('/jsonp', (req, res) => { const callback = req.query.callback; res.send(`${callback}({ "data": "jsonp数据" })`);})$.ajax({ url: 'http://localhost:3000/jsonp', dataType: 'jsonp', jsonp: 'callback', success: function(data) { console.log(data.data); // 输出："jsonp数据" }});// modules/user.jsconst state = { name: '' }const mutations = { setName(state, val) { state.name = val } }export default { namespaced: true, state, mutations }modules: { user: require('./modules/user').default}actions: { async fetchData({ commit }) { const data = await $.get('/api/data'); commit('setData', data); }}import axios from 'axios'async fetchData({ commit }) { try { const response = await axios.get('/api/data'); commit('setData', response.data); } catch(error) { console.error(error); }}new Vuex.Store({ strict: process.env.NODE_ENV !== 'production'})// store/index.jsimport Vue from 'vue'import Vuex from 'vuex'import user from './modules/user'Vue.use(Vuex)export default new Vuex.Store({ state: { globalConfig: {} }, mutations: { setGlobalConfig(state, config) { Vue.set(state, 'globalConfig', config) } }, actions: { initConfig({ commit }) { $.getJSON('/api/config', (config) => { commit('setGlobalConfig', config) }) } }, modules: { user }})<template> <div> <p>用户名：{{ user.name }}</p> <button @click="updateName">更新名称</button> </div></template><script>import { mapState, mapMutations } from 'vuex'export default { computed: { ...mapState(['user']) }, methods: { ...mapMutations(['setName']), updateName() { this.setName('新名字') } }}</script>