概述
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式（官網(wǎng)地址:https://vuex.vuejs.org/zh/）。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。
換成我們大白話來說：Vuex就是一個狀態(tài)管理模式，可以簡單的理解為一個全局對象，然后我們可以修改這個全局對象里面的屬性或者添加方法，但是我們不能像傳統(tǒng)JS的那種直接賦值形式來修改，我們必須得按照Vuex給我們提供的規(guī)則來修改；
Vuex的存在就是應用于解決各個組件之間傳值的問題的，說白了就是看我們傳統(tǒng)的vue父子組件傳值麻煩以及弊端所給我們帶來的福利；這一點官網(wǎng)說的很清楚：
提示：本文將以模塊導入導出的形式來使用vuex，本文略微有點長，希望耐心的看完，當然有條件的話跟著敲一遍效果會更好！
Vuex四大對象
分別是state、mutations、getters、actions；
state：Vuex中的數(shù)據(jù)源，我們所需要的公共數(shù)據(jù)都是存儲在這，可以簡單理解為一個透明的倉庫，可以通過this.$store.state.變量名來訪問這個倉庫里面的數(shù)據(jù)源；
mutations：mutations相當于是這把倉庫的鑰匙，只有通過提交mutations才能進行修改數(shù)據(jù)源操作，也就是說你想更改這個倉庫里面的數(shù)據(jù)就只有通過mutations來進行修改（this.$store.commit("方法名")）；
getters：getters類似于vue中的computed屬性，getters的返回值會根據(jù)state中所依賴的值的狀態(tài)修改來進行改變，如果getters中依賴的state中的值沒有變化，直接讀的是緩存，如果有變化這里也會發(fā)生相應的變化，可以用于監(jiān)聽state的值的變化；這里的getters可以理解為state這個倉庫的保安，如果state的數(shù)據(jù)發(fā)生變化，這個保安就會采取相應措施進行相應變化，如果沒有發(fā)生變化，則啥事沒有則繼續(xù)混吃等死（哈哈哈，不知道比喻恰不恰當，但是是這個意思，大家理解就好，別杠精）
actions：actions和mutations很類似，只是mutations官方規(guī)定只能進行同步操作，而actions里是可以進行異步操作的；也就是說我們需要進行異步操作需要在actions中來進行，然后就是actions提交的是mutations，而不是直接修改狀態(tài)的，也就是說進入這個倉庫修改數(shù)據(jù)，要先去拿到鑰匙才能修改，所以actions是提交給mutations再去執(zhí)行mutations的方法的：
state的用法
首先我們新建一個項目，搭建vue的環(huán)境我們這里就不多贅述了，畢竟本文是講述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">
//視圖層加數(shù)據(jù)方便觀察
<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規(guī)定：如果我們需要讀取vuex中的數(shù)據(jù)，也就是state的數(shù)據(jù)源倉庫，我們必須通過this.$store.state.變量名訪問
mutations的用法
如果我們需要修改vuex中的數(shù)據(jù)源，我們可以通過提交mutations來進行修改；
首先我們需要在我們的視圖層加個按鈕來控制：
App.js
<template>
<div id="app">
<img src="./assets/logo.png">
<p>{{$store.state.number}}</p>
//加個按鈕觸發(fā)事件修改數(shù)據(jù)源
<button @click="add">按鈕</button>
</div>
</template>
<script>
export default {
name: "App",
methods:{
add(){
//要修改數(shù)據(jù)源就要根據(jù)vuex規(guī)定的方法來
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參數(shù)能獲取到上面的state
const mutations={
addFunction(state){
return state.number+=1;
}
}
//這里一定要記得要加入到實例中，不然會報錯
export default new Vuex.Store({
state,
mutations
})
我們可以很直觀的看到，通過this.$store.commit("方法名")來提交mutations修改數(shù)據(jù)源，當然我們的mutations也是可以接收參數(shù)的，第一個參數(shù)為mutations的方法名，第二個參數(shù)為mutations需要接收的參數(shù)，這樣我們的mutations就變得更加的靈活；
getters的用法
getters類似于vue的computer用法，可以監(jiān)聽state數(shù)據(jù)源這個倉庫的數(shù)據(jù)變化，如果getters依賴state的數(shù)據(jù)發(fā)生了變化，getters中依賴的數(shù)據(jù)發(fā)生了變化state也會發(fā)生變化
首先我們可以在store.js中添加以下代碼：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state={
number:1
}
const getters={
//通過方法觸發(fā) 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的時候，觸發(fā)了getters的addFunction方法，addFunction方法會改變state.number的值，這個時候number的值已經(jīng)為2了，所以頁面上會顯示值為2，因為++在后，所以getters此時的值為1，也就是說當getters依賴的state.number的值在getters中發(fā)生變化的時候，state.number就會發(fā)生變化，如果state.number沒有發(fā)生變化，此時getters會優(yōu)先讀緩存；
actions的用法
actions對象里面主要是進行異步操作，類似于mutations，不同的是actions通過提交mutations來進行更改數(shù)據(jù)，而不是直接變更數(shù)據(jù)狀態(tài)；
首先我們可以更改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的適用場景
在項目開發(fā)中，可能會有很多數(shù)據(jù)或者參數(shù)我們可能需要多次讀取或者修改，像購物車等類似功能，這個時候我們的就可以用vuex來實現(xiàn)；vuex畢竟只是一個狀態(tài)管理模式，狀態(tài)管理模式是給我們提供方便的，但不是必需的，因為狀態(tài)管理能做的事通過其他途徑和辦法也能實現(xiàn)。其實個人覺得vuex跟localStorange有點相似，都是用于存儲和修改數(shù)據(jù)，為了解決跨頁面數(shù)據(jù)丟失問題；
以上就是一文輕松理解Vuex的詳細內(nèi)容，更多關(guān)于Vuex的資料請關(guān)注服務器之家其它相關(guān)文章！
原文鏈接：https://www.cnblogs.com/dengyao-blogs/p/11558098.html
