一文輕松理解Vuex
概述
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式(官網地址:https://vuex.vuejs.org/zh/)。它采用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。
換成我們大白話來說:Vuex就是一個狀態管理模式,可以簡單的理解為一個全局對象,然後我們可以修改這個全局對象裡面的屬性或者添加方法,但是我們不能像傳統JS的那種直接賦值形式來修改,我們必須得按照Vuex給我們提供的規則來修改;
Vuex的存在就是應用於解決各個組件之間傳值的問題的,說白瞭就是看我們傳統的vue父子組件傳值麻煩以及弊端所給我們帶來的福利;這一點官網說的很清楚:
提示:本文將以模塊導入導出的形式來使用vuex,本文略微有點長,希望耐心的看完,當然有條件的話跟著敲一遍效果會更好!
Vuex四大對象
分別是state、mutations、getters、actions;
state:Vuex中的數據源,我們所需要的公共數據都是存儲在這,可以簡單理解為一個透明的倉庫,可以通過this.$store.state.變量名來訪問這個倉庫裡面的數據源;
mutations:mutations相當於是這把倉庫的鑰匙,隻有通過提交mutations才能進行修改數據源操作,也就是說你想更改這個倉庫裡面的數據就隻有通過mutations來進行修改(this.$store.commit(“方法名”));
getters:getters類似於vue中的computed屬性,getters的返回值會根據state中所依賴的值的狀態修改來進行改變,如果getters中依賴的state中的值沒有變化,直接讀的是緩存,如果有變化這裡也會發生相應的變化,可以用於監聽state的值的變化;這裡的getters可以理解為state這個倉庫的保安,如果state的數據發生變化,這個保安就會采取相應措施進行相應變化,如果沒有發生變化,則啥事沒有則繼續混吃等死(哈哈哈,不知道比喻恰不恰當,但是是這個意思,大傢理解就好,別杠精)
actions:actions和mutations很類似,隻是mutations官方規定隻能進行同步操作,而actions裡是可以進行異步操作的;也就是說我們需要進行異步操作需要在actions中來進行,然後就是actions提交的是mutations,而不是直接修改狀態的,也就是說進入這個倉庫修改數據,要先去拿到鑰匙才能修改,所以actions是提交給mutations再去執行mutations的方法的:
state的用法
首先我們新建一個項目,搭建vue的環境我們這裡就不多贅述瞭,畢竟本文是講述vuex的;先在項目中安裝vuex:
安裝vuex命令:npm install vuex –save
安裝完vuex之後我們在src的目錄下新建一個vuex文件夾,同時在vuex文件夾中新建一個store.js文件:
store.js:
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state={ number:1 } export default new Vuex.Store({ state, })
然後我們在main.js中引用store.js,並將實例化對象的時候加入store對象
main.js
import Vue from 'vue' import App from './App' import router from './router' //引用store.js import store from './vuex/store' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, //實例化的時候加入store對象 store, components: { App }, template: '<App/>' })
然後修改一下我們的App.vue文件
App.vue
<template> <div id="app"> <img src="./assets/logo.png"> //視圖層加數據方便觀察 <p>{{this.$store.state.number}}</p> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
通過上述代碼我們可以看到,我們在App.vue中加入瞭一個p標簽,vuex規定:如果我們需要讀取vuex中的數據,也就是state的數據源倉庫,我們必須通過this.$store.state.變量名訪問
mutations的用法
如果我們需要修改vuex中的數據源,我們可以通過提交mutations來進行修改;
首先我們需要在我們的視圖層加個按鈕來控制:
App.js
<template> <div id="app"> <img src="./assets/logo.png"> <p>{{$store.state.number}}</p> //加個按鈕觸發事件修改數據源 <button @click="add">按鈕</button> </div> </template> <script> export default { name: 'App', methods:{ add(){ //要修改數據源就要根據vuex規定的方法來 this.$store.commit('addFunction'); } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
然後修改我們的store.js:
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state={ number:1 } //添加mutations對象,state參數能獲取到上面的state const mutations={ addFunction(state){ return state.number+=1; } } //這裡一定要記得要加入到實例中,不然會報錯 export default new Vuex.Store({ state, mutations })
我們可以很直觀的看到,通過this.$store.commit(‘方法名’)來提交mutations修改數據源,當然我們的mutations也是可以接收參數的,第一個參數為mutations的方法名,第二個參數為mutations需要接收的參數,這樣我們的mutations就變得更加的靈活;
getters的用法
getters類似於vue的computer用法,可以監聽state數據源這個倉庫的數據變化,如果getters依賴state的數據發生瞭變化,getters中依賴的數據發生瞭變化state也會發生變化
首先我們可以在store.js中添加以下代碼:
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state={ number:1 } const getters={ //通過方法觸發 state是上面的state對象,能讀取state的值 addFunction(state){ return state.number++; } } export default new Vuex.Store({ state, //這裡一定要記得在實例化的時候加入對象 getters })
App.vue中的視圖我們可以這樣更改:
<template> <div id="app"> <img src="./assets/logo.png"> <p>頁面的值:{{$store.state.number}}</p> //加入一個標簽跟頁面的值做對比 <p>我的getters的值:{{$store.getters.addFunction}}</p> </div> </template> <script> export default { name: 'App', } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
通過上述代碼以及視圖層我們可以清晰的看到,當我們操作瞭getters的時候,觸發瞭getters的addFunction方法,addFunction方法會改變state.number的值,這個時候number的值已經為2瞭,所以頁面上會顯示值為2,因為++在後,所以getters此時的值為1,也就是說當getters依賴的state.number的值在getters中發生變化的時候,state.number就會發生變化,如果state.number沒有發生變化,此時getters會優先讀緩存;
actions的用法
actions對象裡面主要是進行異步操作,類似於mutations,不同的是actions通過提交mutations來進行更改數據,而不是直接變更數據狀態;
首先我們可以更改store.js中的代碼:
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state={ number:1 } const mutations={ addFunction(state){ return state.number++; } } const getters={ addFunction(state){ return state.number++; } } //context是具有store實例一樣的屬性和方法的對象 const actions={ addFunction(context){ context.commit("addFunction"); } } export default new Vuex.Store({ state, mutations, getters, //這裡記得要在實例化的時候要加上 actions })
App.vue中代碼修改為:
<template> <div id="app"> <img src="./assets/logo.png"> <p>頁面的值:{{$store.state.number}}</p> <button @click="add">按鈕</button> </div> </template> <script> export default { name: 'App', methods:{ add(){ //actions中通過this.$store.dispatch來提交mutations進行修改 this.$store.dispatch("addFunction") } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
Vuex的適用場景
在項目開發中,可能會有很多數據或者參數我們可能需要多次讀取或者修改,像購物車等類似功能,這個時候我們的就可以用vuex來實現;vuex畢竟隻是一個狀態管理模式,狀態管理模式是給我們提供方便的,但不是必需的,因為狀態管理能做的事通過其他途徑和辦法也能實現。其實個人覺得vuex跟localStorange有點相似,都是用於存儲和修改數據,為瞭解決跨頁面數據丟失問題;
以上就是一文輕松理解Vuex的詳細內容,更多關於Vuex的資料請關註WalkonNet其它相關文章!