引言

在現(xiàn)代Web開發(fā)中，前端應(yīng)用變得越來越復(fù)雜。隨著應(yīng)用規(guī)模的擴(kuò)大和數(shù)據(jù)流的復(fù)雜性增加，有效地管理應(yīng)用的狀態(tài)成為了一項(xiàng)重要任務(wù)。Vue.js作為一種流行的JavaScript框架，提供了Vuex這個(gè)強(qiáng)大的狀態(tài)管理庫，旨在解決這個(gè)問題。本文將深入探討Vuex的核心概念和特點(diǎn)，并通過實(shí)際案例展示如何使用Vuex進(jìn)行數(shù)據(jù)獲取、值變更和異步請(qǐng)求。

1. Vuex的簡介

1.1 什么是Vuex？

Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)的一致性和可預(yù)測性。Vuex的設(shè)計(jì)靈感來自于Flux和Redux，但針對(duì)Vue.js的特點(diǎn)進(jìn)行了優(yōu)化和擴(kuò)展。

1.2 Vuex的核心概念

在使用Vuex之前，我們需要了解其核心概念：

• State：即應(yīng)用的狀態(tài)，保存在一個(gè)單一的JavaScript對(duì)象中。通過this.$store.state可以訪問狀態(tài)。
• Mutation：用于變更狀態(tài)的方法，每個(gè)mutation都有一個(gè)字符串的事件類型和一個(gè)回調(diào)函數(shù)。通過commit方法觸發(fā)mutation。
• Getter：類似于組件中的計(jì)算屬性，用于從state中派生出一些狀態(tài)。通過this.$store.getters可以訪問getter。
• Action：用于處理異步操作或批量提交mutation的方法。通過dispatch方法觸發(fā)action。

2. Vuex的值獲取與改變(綜合案例)

首先，需要兩個(gè)頁面

page1

<template><div><h1>page1</h1><p>改變state的值</p>請(qǐng)輸入:<input v-model="msg"/><button @click="fun1">獲取state</button><button @click="fun2">改變state</button></div>
</template><script>export default{data(){return {msg:'mrz'}},methods:{fun1(){alert(this.$store.state.eduName)},fun2(){this.$store.commit('setEduName',{eduName:this.msg})}}}
</script><style>
</style>

page2

<template><div><h1>page2</h1>{{eduName}}</div></template><script>export default{data(){return {msg:'mrz'}},computed:{eduName(){return this.$store.getters.getEduName;}}}
</script><style>
</style>

配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Register from '@/views/Register'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import AddBook from '@/views/book/AddBook'
import BookList from '@/views/book/BookList'
import page1 from '@/views/vuex/page1'
import page2 from '@/views/vuex/page2'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Login',component: Login},{path: '/Register',component: Register},{path: '/AppMain',name: 'AppMain',component: AppMain,children:[{path: 'LeftNav',name: 'LeftNav',component: LeftNav},{path: 'TopNav',name: 'TopNav',component: TopNav},{path: '/book/AddBook',name: 'AddBook',component: AddBook},{path: '/book/BookList',name: 'BookList',component: BookList},{path: '/vuex/page1',name: 'page1',component: page1},{path: '/vuex/page2',name: 'page2',component: page2}]}]
})

建包store以及五個(gè)js文件

state.js

export default{eduName:'唱歌會(huì)跑調(diào)Y'
}

mutations.js

export default{setEduName:(state,payload)=>{state.eduName = payload.eduName}
}

getters.js

export default{getEduName:(state)=>{return state.eduName;}
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const store = new Vuex.Store({state,getters,actions,mutations})export default store

配置main.js(import store from ‘./store’)

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//開發(fā)環(huán)境下才會(huì)引入mockjs
// process.env.MOCK && require('@/mock')
// 新添加1
import ElementUI from 'element-ui'
// 新添加2，避免后期打包樣式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import store from './store'
// 新添加3
Vue.use(ElementUI)
Vue.config.productionTip = false/* eslint-disable no-new */
import axios from '@/api/http'
import VueAxios from 'vue-axios'Vue.use(VueAxios,axios)
new Vue({el: '#app',router,store,data(){return{Bus:new Vue()}},components: { App },template: '<App/>'
})

• 這樣獲取和改變就OK了，看看效果
  
  點(diǎn)擊改變
  
  page2的值發(fā)生改變
  

3. Vuex的異步請(qǐng)求

3.1 異步請(qǐng)求的必要性
在現(xiàn)代Web應(yīng)用中，我們經(jīng)常需要進(jìn)行異步操作，如獲取后端數(shù)據(jù)、發(fā)送網(wǎng)絡(luò)請(qǐng)求等。Vuex提供了一種機(jī)制來處理這種場景，并保證狀態(tài)的一致性。

3.2 使用Actions進(jìn)行異步操作
在Vuex中，我們可以定義actions來進(jìn)行異步操作。以下是一些使用actions的示例：
page1

<template><div><h1>page1</h1><p>改變state的值</p>請(qǐng)輸入:<input v-model="msg" /><button @click="fun1">獲取state</button><button @click="fun2">改變state</button><button @click="fun3">改變state</button><button @click="fun4">請(qǐng)求后臺(tái)</button></div>
</template><script>export default {data() {return {msg: 'mrz'}},methods: {fun1() {alert(this.$store.state.eduName)},fun2() {this.$store.commit('setEduName', {eduName: this.msg})},fun3() {this.$store.dispatch('setEduNameAsync', {eduName: this.msg})},fun4() {this.$store.dispatch('setEduNameAjax', {eduName: this.msg,_this:this})}}}
</script><style>
</style>

actions.js

export default{setEduNameAsync:(context,payload)=>{setTimeout(function(){context.commit('setEduName',payload)},15000)},setEduNameAjax:(context,payload)=>{let _this = payload._thislet url = _this.axios.urls.Vuex_Ajax;let params = {resturantName: payload.eduName}_this.axios.post(url, params).then(r => {console.log(r)}).catch(e => {})}
}

• 同步用commit，異步用dispatch,期間主頁this的局限,在actions.js調(diào)用不到全局this的實(shí)例，需要用傳參代替，將參數(shù)帶過去，才能發(fā)送Ajax請(qǐng)求.
• 另外，注意http發(fā)送請(qǐng)求超時(shí)時(shí)間，一般設(shè)置為10秒，超過10秒及超時(shí)，則不會(huì)相應(yīng)數(shù)據(jù)，在用deBug的情況下經(jīng)常會(huì)出現(xiàn)數(shù)據(jù)相應(yīng)不到的情況，需注意！！！
  // axios默認(rèn)配置
  axios.defaults.timeout = 10000; // 超時(shí)時(shí)間

總結(jié)

本文深入介紹了Vuex的核心概念和特點(diǎn)，并通過三個(gè)大目錄展示了在實(shí)際應(yīng)用中如何使用Vuex進(jìn)行狀態(tài)管理。我們學(xué)習(xí)了如何獲取和改變Vuex中的值，以及如何處理異步請(qǐng)求。Vuex作為Vue.js生態(tài)系統(tǒng)中的重要組成部分，在復(fù)雜應(yīng)用開發(fā)中扮演著關(guān)鍵的角色。希望本文對(duì)于理解和應(yīng)用Vuex有所幫助。