概述

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式（官網(wǎng)地址:https://vuex.vuejs.org/zh/）。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

換成我們大白話來說：Vuex就是一個(gè)狀態(tài)管理模式，可以簡(jiǎn)單的理解為一個(gè)全局對(duì)象，然后我們可以修改這個(gè)全局對(duì)象里面的屬性或者添加方法，但是我們不能像傳統(tǒng)JS的那種直接賦值形式來修改，我們必須得按照Vuex給我們提供的規(guī)則來修改；

Vuex的存在就是應(yīng)用于解決各個(gè)組件之間傳值的問題的，說白了就是看我們傳統(tǒng)的vue父子組件傳值麻煩以及弊端所給我們帶來的福利；這一點(diǎn)官網(wǎng)說的很清楚：

提示：本文將以模塊導(dǎo)入導(dǎo)出的形式來使用vuex，本文略微有點(diǎn)長(zhǎng)，希望耐心的看完，當(dāng)然有條件的話跟著敲一遍效果會(huì)更好！

Vuex四大對(duì)象

分別是state、mutations、getters、actions；

state：Vuex中的數(shù)據(jù)源，我們所需要的公共數(shù)據(jù)都是存儲(chǔ)在這，可以簡(jiǎn)單理解為一個(gè)透明的倉(cāng)庫(kù)，可以通過this.$store.state.變量名來訪問這個(gè)倉(cāng)庫(kù)里面的數(shù)據(jù)源；

mutations：mutations相當(dāng)于是這把倉(cāng)庫(kù)的鑰匙，只有通過提交mutations才能進(jìn)行修改數(shù)據(jù)源操作，也就是說你想更改這個(gè)倉(cāng)庫(kù)里面的數(shù)據(jù)就只有通過mutations來進(jìn)行修改（this.$store.commit("方法名")）；

getters：getters類似于vue中的computed屬性，getters的返回值會(huì)根據(jù)state中所依賴的值的狀態(tài)修改來進(jìn)行改變，如果getters中依賴的state中的值沒有變化，直接讀的是緩存，如果有變化這里也會(huì)發(fā)生相應(yīng)的變化，可以用于監(jiān)聽state的值的變化；這里的getters可以理解為state這個(gè)倉(cāng)庫(kù)的保安，如果state的數(shù)據(jù)發(fā)生變化，這個(gè)保安就會(huì)采取相應(yīng)措施進(jìn)行相應(yīng)變化，如果沒有發(fā)生變化，則啥事沒有則繼續(xù)混吃等死（哈哈哈，不知道比喻恰不恰當(dāng)，但是是這個(gè)意思，大家理解就好，別杠精）

actions：actions和mutations很類似，只是mutations官方規(guī)定只能進(jìn)行同步操作，而actions里是可以進(jìn)行異步操作的；也就是說我們需要進(jìn)行異步操作需要在actions中來進(jìn)行，然后就是actions提交的是mutations，而不是直接修改狀態(tài)的，也就是說進(jìn)入這個(gè)倉(cāng)庫(kù)修改數(shù)據(jù)，要先去拿到鑰匙才能修改，所以actions是提交給mutations再去執(zhí)行mutations的方法的：

state的用法

首先我們新建一個(gè)項(xiàng)目，搭建vue的環(huán)境我們這里就不多贅述了，畢竟本文是講述vuex的；先在項(xiàng)目中安裝vuex：

安裝vuex命令：npm install vuex --save

安裝完vuex之后我們?cè)趕rc的目錄下新建一個(gè)vuex文件夾，同時(shí)在vuex文件夾中新建一個(gè)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,
})

然后我們?cè)趍ain.js中引用store.js，并將實(shí)例化對(duì)象的時(shí)候加入store對(duì)象

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,
//實(shí)例化的時(shí)候加入store對(duì)象
  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>

通過上述代碼我們可以看到，我們?cè)贏pp.vue中加入了一個(gè)p標(biāo)簽，vuex規(guī)定：如果我們需要讀取vuex中的數(shù)據(jù)，也就是state的數(shù)據(jù)源倉(cāng)庫(kù)，我們必須通過this.$store.state.變量名訪問

mutations的用法

如果我們需要修改vuex中的數(shù)據(jù)源，我們可以通過提交mutations來進(jìn)行修改；

首先我們需要在我們的視圖層加個(gè)按鈕來控制：

App.js

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>{{$store.state.number}}</p>
    //加個(gè)按鈕觸發(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對(duì)象,state參數(shù)能獲取到上面的state
const mutations={
  addFunction(state){
    return state.number+=1;
  }
}

//這里一定要記得要加入到實(shí)例中，不然會(huì)報(bào)錯(cuò)
export default new Vuex.Store({
  state,
  mutations
})

我們可以很直觀的看到，通過this.$store.commit('方法名')來提交mutations修改數(shù)據(jù)源，當(dāng)然我們的mutations也是可以接收參數(shù)的，第一個(gè)參數(shù)為mutations的方法名，第二個(gè)參數(shù)為mutations需要接收的參數(shù)，這樣我們的mutations就變得更加的靈活；

getters的用法

getters類似于vue的computer用法，可以監(jiān)聽state數(shù)據(jù)源這個(gè)倉(cāng)庫(kù)的數(shù)據(jù)變化，如果getters依賴state的數(shù)據(jù)發(fā)生了變化，getters中依賴的數(shù)據(jù)發(fā)生了變化state也會(huì)發(fā)生變化

首先我們可以在store.js中添加以下代碼：

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


Vue.use(Vuex);
const state={
  number:1
}

const getters={
    //通過方法觸發(fā)  state是上面的state對(duì)象，能讀取state的值
  addFunction(state){
    return state.number++;
  }
}
export default new Vuex.Store({
  state,
//這里一定要記得在實(shí)例化的時(shí)候加入對(duì)象
  getters
})

App.vue中的視圖我們可以這樣更改：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>頁(yè)面的值：{{$store.state.number}}</p>
    //加入一個(gè)標(biāo)簽跟頁(yè)面的值做對(duì)比
    <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>

通過上述代碼以及視圖層我們可以清晰的看到，當(dāng)我們操作了getters的時(shí)候，觸發(fā)了getters的addFunction方法，addFunction方法會(huì)改變state.number的值，這個(gè)時(shí)候number的值已經(jīng)為2了，所以頁(yè)面上會(huì)顯示值為2，因?yàn)?+在后，所以getters此時(shí)的值為1，也就是說當(dāng)getters依賴的state.number的值在getters中發(fā)生變化的時(shí)候，state.number就會(huì)發(fā)生變化，如果state.number沒有發(fā)生變化，此時(shí)getters會(huì)優(yōu)先讀緩存；

actions的用法

actions對(duì)象里面主要是進(jìn)行異步操作，類似于mutations，不同的是actions通過提交mutations來進(jìn)行更改數(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實(shí)例一樣的屬性和方法的對(duì)象
const actions={
  addFunction(context){
    context.commit("addFunction");
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters,
//這里記得要在實(shí)例化的時(shí)候要加上
  actions
})

App.vue中代碼修改為：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>頁(yè)面的值：{{$store.state.number}}</p>
     <button @click="add">按鈕</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    add(){
//actions中通過this.$store.dispatch來提交mutations進(jìn)行修改
      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的適用場(chǎng)景

在項(xiàng)目開發(fā)中，可能會(huì)有很多數(shù)據(jù)或者參數(shù)我們可能需要多次讀取或者修改，像購(gòu)物車等類似功能，這個(gè)時(shí)候我們的就可以用vuex來實(shí)現(xiàn)；vuex畢竟只是一個(gè)狀態(tài)管理模式，狀態(tài)管理模式是給我們提供方便的，但不是必需的，因?yàn)闋顟B(tài)管理能做的事通過其他途徑和辦法也能實(shí)現(xiàn)。其實(shí)個(gè)人覺得vuex跟localStorange有點(diǎn)相似，都是用于存儲(chǔ)和修改數(shù)據(jù)，為了解決跨頁(yè)面數(shù)據(jù)丟失問題；

以上就是一文輕松理解Vuex的詳細(xì)內(nèi)容，更多關(guān)于Vuex的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論