一、什么是vuex

Vuex是vue項(xiàng)目的狀態(tài)管理器(狀態(tài)管理工具)。vue項(xiàng)目的狀態(tài)是通過vue實(shí)例(組件)綁定的變量來體現(xiàn)。所以也可以說vuex是用來管理vue項(xiàng)目中的各種變量(vue項(xiàng)目中的組件可以訪問vuex中管理的變量——方便了組件的通信)

二、vuex的工作方式

（1）在全局中定義一個state：state本質(zhì)是一個對象，該對象的屬性就是vue組件用到的變量(所有組件共享這些變量)

（2）在vue組件中若要更新state的值，必須通過mutation來進(jìn)行(只能通過mutation去改變state的狀態(tài))，只能同步修改(即mutation中的方法都是同步的)

（3）若要異步的修改state的值，需要通過action來進(jìn)行(action不能直接修改state，但是它可以向mutation發(fā)起請求，由mutation來修改state的值，可以在action中定義異步方法)

三、vuex的使用場景

（1）不適合：小型的簡單應(yīng)用

（2）適合：中大型單頁面應(yīng)用

多個視圖(多個組件)依賴同一個狀態(tài)

不同的視圖的行為需要改變同一個狀態(tài)

四、工作流程

View-->Action-->Mutations-->State-->View

五、vuex的核心API

（1）state：

必須是唯一的

本質(zhì)是一個對象，維護(hù)的是vue的狀態(tài)

const state = {

屬性名：初始化值

}

state:{

屬性名：初始化值

}

（2）mutations

作用：用來修改state

定義了多個用于修改state的方法

只能包含同步代碼

定義方式：

const mutations = {

方法名1(state,[data]){

//更改state的屬性值

},

方法名2(state,[data]){

//更改state的屬性值

},

}

觸發(fā)方式：

（1）在actions中通過commit('mutations 的方法名')實(shí)現(xiàn)觸發(fā)

（2）在組件中通過 this.$store.commit('方法名'，params)實(shí)現(xiàn)觸發(fā)

（3）actions：通過actions去觸發(fā)mutations中的方法，實(shí)現(xiàn)對state的異步修改

• 可以包含異步代碼
• 通過commit觸發(fā)mutations來間接修改state
• 觸發(fā)方式(如何觸發(fā)actions)：在組件中通過this.$store.dispatch('action名稱'，data1)進(jìn)行觸發(fā)
• 定義方式

const actions = {

方法名({commit,state},data1){

commit('mutations中的方法名')

}

}

（4）getters：用于獲取state的屬性值，類似于state的計(jì)算屬性

定義方法：

const getters = {

方法名([參數(shù)]){

return state.屬性名

}

}

在組件中的使用方式： this.$store.getters.方法名

（5）modules：在大型項(xiàng)目中用于管理多個子模塊的state

六、應(yīng)用

注意版本：vuex3對應(yīng)的vue2,vuex4對應(yīng)的vue3

（1）安裝vuex

npm install vuex@3 | npm i vuex@3 -S

（2）定義vuex的store(倉庫)

src/store/store.js

導(dǎo)入vue和vuex

import Vue from 'vue'
import Vuex from 'vuex'
//全局注冊vuex
Vue.use(Vuex)
//定義全局的store:即定義全局的狀態(tài)管理器(數(shù)據(jù)倉庫)
export  default  new Vuex.Store({
    state:{  },
    mutations:{},
    actions:{},
    getters:{},
    modules:{}
})

在main.js文件中進(jìn)行配置

import Vue from 'vue'
import App from './App.vue'
// 導(dǎo)入vuex的配置文件
import store from "@/store/store";
// 在vue實(shí)例中引用
new Vue({
  store,
  render: function (h) { return h(App) },
}).$mount('#app')

注：

在組件中觸發(fā)mutations中定義的方法：觸發(fā)同步方法

this.$store.commit('mutations中定義的方法名'，參數(shù))

在組件中觸發(fā)actions中定義的方法：觸發(fā)異步方法

this.$store.dispatch('actions中定義的方法名')

獲取state中屬性值的方法：

1.直接獲取：this.$store.state.屬性名

2.通過getters：this.$store.getters.屬性名

在定義vuex的store實(shí)例時不能使用this

七、vuex的工作流程

（1）在組件中通過commit直接向mutations提交修改state的請求、或者通過dispatch向actions派發(fā)請求

（2）mutations通過接收到的請求去修改state的狀態(tài)

到此這篇關(guān)于Vue狀態(tài)管理工具Vuex工作原理解析的文章就介紹到這了,更多相關(guān)Vue Vuex內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論