Vue之进阶篇

3. Vuex

Vuex用于集中管理组件状态，提供一个公共的数据池。确保在项目创建时选择了Vuex插件。

状态管理文件位于src/store/index.js。以下是一个简要的Vuex配置示例：

import Vue from 'vue'  import Vuex from 'vuex'  Vue.use(Vuex)  export default new Vuex.Store({    state: {      counter: 0    },    mutations: {      increment(state) {        state.counter++      },      decrement(state) {        state.counter--      },      incrementCount(state, count) {        state.counter += count      }    },    actions: {      aIncrement(context) {        setTimeout(() => {          context.commit('increment')        }, 1000)      }    }  })

在组件中使用Vuex状态：

{{ $store.state.counter }}       +      -      +5

建议安装Vue DevTools来更方便地调试Vuex状态。

4. Axios

Axios是Vue推荐的AJAX库，简洁易用，支持浏览器和Node.js环境。

安装命令：npm install axios --save

import axios from 'axios'  import App from './App.vue'  import router from './router'  import store from './store'  new Vue({    router,    store,    render: h => h(App)  }).$mount('#app')

Axios的使用示例：

axios({    url: 'http://123.207.32.32:8000/home/multidata'  }).then(res => {    console.log(res)  })

可根据需求配置全局参数：

axios.defaults.baseURL = 'http://123.207.32.32:8000'  axios.defaults.timeout = 2000

建议对Axios进行封装，便于维护：

export function request(config) {    return axios.create({      baseURL: 'http://123.207.32.32:8000'    }).call(config)  }

5. 其他工具

• 建议使用Webpack或直接配置Webpack进行项目开发
• Element UI是一个与Vue风格匹配的UI框架