Vue2状态管理、路由器控制与网络请求作用

在根据Vue2开发设计Web应用中，常见的技术栈包含Vue Router、Vuex和Axios。这种库为Vue2带来了强悍的状态管理、路由器控制与网络请求作用。

1. Vue Router

Vue Router是Vue2官方路由管理器，可以帮助开发人员迅速搭建单页面应用（SPA），带来了声明式的路由器投射和复用部件。

使用Vue Router时，我们应该先进行npm或yarn组装：

npm install vue-router

或使用yarn

yarn add vue-router

安装完毕后，在Vue运用中引进Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

const router = new VueRouter({
  routes
})

上边代码重新定义了三个路由器，对应的是三个部件（Home、About、Contact）。在Vue案例中，我们应该把router案例引入，使它管理方法全部运用的路由器：

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

那样，我们就能在运用中应用router-link和router-view部件开展导航栏和路由元件的3D渲染。

2. Vuex

Vuex是Vue2官方网所提供的情况管理机制和库，它是一种集中型的存储系统解决方法，用以管理方法好几个部件间的分享情况。Vuex把元件的分享情况提取出去，以一个全局性单例设计模式管理方法，一切部件都能够载入或是载入这一单例模式状态。

使用Vuex时，我们应该先进行npm或yarn组装：

npm install vuex

或使用yarn

yarn add vuex

安装完毕后，在Vue运用中引进Vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count  
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

上边代码重新定义了一个情况（count）或两个升级状态下的方式（increment和incrementAsync），在其中incrementAsync是多线程的，认为在一秒之后才会升级情况。

在Vue部件中浏览与使用Vuex情况：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    }
  }
}
</script>

在Vue部件中,应用 store特性获得ex案例,根据 commit/方式升级情况,根据 dispatch方式开启 action。

3. Axios

Axios是一个根据Promise的HTTP库，可用作电脑浏览器和Node.js的HTTP手机客户端要求，它相较于传统XMLHttpRequest度得到更好的封装性和便捷性。在Vue2设计中，常见Axios去进行网络请求。

使用Axios时，我们应该先进行npm或yarn组装：

npm install axios

或使用yarn

yarn add axios

安装完毕后，大家可以在Vue部件中应用Axios发送数据：

<template>
  <div>
    <ul>
      <li v-for="item in users" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
      this.users = response.data
    })
  }
}
</script>

上边代码应用Axios推送GET要求，从JSONPlaceholder API获得用户列表，并把用户列表保存在元件的data特性中。

以上就是应用Vue2常见的技术栈，包含Vue Router、Vuex和Axios的讲解以实现。这种库能够帮助开发人员更有效地开发设计Web运用，带来了强悍的状态管理、路由器控制与网络请求作用。