Vuex詳細(xì)介紹和使用方法

更新時(shí)間：2022年03月15日 09:40:06 作者：.NET開發(fā)菜鳥

本文詳細(xì)講解了Vuex和其使用方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、什么是Vuex

官網(wǎng)解釋如下：

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能。

那么什么是“狀態(tài)管理模式”呢？

狀態(tài)自管理應(yīng)用包括以下幾個(gè)部分：

state：驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；
view：以聲明方式將state映射到視圖；
action：響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化；

看下面這張表示“單向數(shù)據(jù)流”理念的簡(jiǎn)單示意圖：

從上面的圖中可以看出：整個(gè)系統(tǒng)的數(shù)據(jù)流是單向的：數(shù)據(jù)（即state）去驅(qū)動(dòng)視圖（view）的更新，用戶在view上面進(jìn)行一些操作觸發(fā)action，通過action去更新state，而不是視圖直接更新state。

二、運(yùn)行機(jī)制

下面來看一張官網(wǎng)上面的Vuex運(yùn)行機(jī)制圖：

從圖中可以看出，Vuex不在和組件強(qiáng)相關(guān)。運(yùn)行機(jī)制：Vuex提供數(shù)據(jù)（state），來驅(qū)動(dòng)視圖（這里指的是Vue組件），視圖通過Dispatch派發(fā)Action，在Action中可以進(jìn)一步做一些異步的操作（例如通過ajax請(qǐng)求后端的接口數(shù)據(jù)），然后通過Commit提交給Mutations，由Mutations去最終更改state。那么為什么要經(jīng)過Mutations呢？這是因?yàn)槲覀円赩ue調(diào)試工具(Devtools)中記錄數(shù)據(jù)的變化，這樣可以通過插件去進(jìn)行進(jìn)一步的調(diào)試。所以說Mutations中只能是純同步的操作，如果是有異步操作，那么就需要在Actions中進(jìn)行處理。如果說沒有異步操作，那么可以直接由組件進(jìn)行Commit操作Mutations。如下圖所示：

三、創(chuàng)建項(xiàng)目

1、使用腳手架搭建Vue項(xiàng)目

在命令行里面輸入如下命令即可創(chuàng)建一個(gè)Vue項(xiàng)目：

vue init webpack vuex-demo

如下圖所示：

然后回車進(jìn)行安裝，選擇默認(rèn)配置即可，出現(xiàn)如下面所示的界面表示創(chuàng)建成功：

2、安裝Vuex

新創(chuàng)建的項(xiàng)目里面默認(rèn)不會(huì)安裝Vuex，如果要使用Vuex，需要進(jìn)行手動(dòng)安裝，輸入下面的命令：

npm install vuex --save

如下圖所示：

注：--save表示進(jìn)行全局安裝

3、啟動(dòng)項(xiàng)目

在第一步創(chuàng)建成功項(xiàng)目以后，最后會(huì)提示如何啟動(dòng)項(xiàng)目，如下面所示：

這兩行命令表示先進(jìn)入項(xiàng)目的根目錄，然后輸入npm run dev命令即可啟動(dòng)項(xiàng)目，如下圖所示：

在瀏覽器窗口里面輸入：http://localhost:8080進(jìn)行瀏覽：

4、配置使用Vuex

4.1、創(chuàng)建store文件夾

在src目錄下面創(chuàng)建一個(gè)store文件夾，該文件夾用來存放所有與狀態(tài)管理有關(guān)的文件，然后創(chuàng)建一個(gè)index.js文件，Store對(duì)象寫在index.js文件里面，代碼如下：

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 添加全局引用
Vue.use(Vuex);
// 創(chuàng)建store對(duì)象
const store=new Vuex.Store({
 
})
// 導(dǎo)出創(chuàng)建的store對(duì)象
export default store;

4.2、配置全局使用store對(duì)象

在main.js里面配置全局使用store對(duì)象：

// 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'
import App from './App'
import router from './router'
// 引入index.js文件
import store from './store/index'
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,// 配置全局使用store對(duì)象
  components: { App },
  template: '<App/>'
})

到此為止，一個(gè)Vuex項(xiàng)目創(chuàng)建完成，并且安裝了Vuex，下面就可以使用該項(xiàng)目演示如何使用Vuex進(jìn)行狀態(tài)管理了。

四、Vuex核心概念

1、state

在index.js文件里面添加state，代碼如下：

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 添加全局引用
Vue.use(Vuex);
 
// 創(chuàng)建state
const state={
    // 定義num屬性并賦初始值為1
    num:1
}
 
// 創(chuàng)建store對(duì)象
const store=new Vuex.Store({
     // 添加state導(dǎo)出
     state
})
 
// 導(dǎo)出創(chuàng)建的store對(duì)象
export default store;

在test.vue中使用展示初始值：

<template>
    <p>初始值:{{this.$store.state.num}}</p>
</template>

<script>
export default {
    name:'test'
}
</script>

頁(yè)面效果：

注：還可以通過計(jì)算屬性獲取num的值：

<template>
   <div>
        <p>初始值:{{this.$store.state.num}}</p>
        <p>通過計(jì)算屬性獲取初始值:{{count}}</p>
   </div>
</template>

<script>
export default {
    name:'test',
    // 計(jì)算屬性
    computed:{
        count(){
            return this.$store.state.num;
        }
    }
}
</script>

效果如圖所示：

2、mutations

在上面使用了state可以獲取到屬性的值，那么如何修改state中屬性的值呢？這時(shí)候就要用到mutations了。官網(wǎng)解釋如下：

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的事件類型 (type)和一個(gè)回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)。還是以上面的為例子。

修改index.js文件，添加mutations:

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 添加全局引用
Vue.use(Vuex);

// 創(chuàng)建state
const state={
    // 定義num屬性并賦初始值為1
    num:1
}

// 改變狀態(tài)，通過commit
var mutations={
    // state作為第一個(gè)參數(shù)
    ChangeState(state){
        // 自增1
        state.num++;
    }
}

// 創(chuàng)建store對(duì)象
const store=new Vuex.Store({
     // 添加state
     state,
     // 導(dǎo)出mutations
     mutations
})

// 導(dǎo)出創(chuàng)建的store對(duì)象
export default store;

修改test.vue文件：

<template>
   <div>
        <p>初始值:{{this.$store.state.num}}</p>
        <p>通過計(jì)算屬性獲取初始值:{{count}}</p>
        <button @click="$store.commit('ChangeState')">改變屬性值</button>
   </div>
</template>

<script>
export default {
    name:'test',
    // 計(jì)算屬性
    computed:{
        count(){
            return this.$store.state.num;
        }
    }
}
</script>

效果：

注：改變狀態(tài)還可以傳遞參數(shù)進(jìn)行修改，看下面的例子：

修改index.js文件如下：

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 添加全局引用
Vue.use(Vuex);

// 創(chuàng)建state
const state={
    // 定義num屬性并賦初始值為1
    num:1
}

// 改變狀態(tài)，通過commit
var mutations={
    // state作為第一個(gè)參數(shù)
    ChangeState(state){
        // 自增1
        state.num++;
    },
    // state作為第一個(gè)參數(shù),para作為第二個(gè)參數(shù)
    ChangeStateWithPara(state,para){
        // 自增1
        state.num += para;
    }
}

// 創(chuàng)建store對(duì)象
const store=new Vuex.Store({
     // 添加state
     state,
     // 導(dǎo)出mutations
     mutations
})

// 導(dǎo)出創(chuàng)建的store對(duì)象
export default store;

test.vue修改如下：

<template>
   <div>
        <p>初始值:{{this.$store.state.num}}</p>
        <p>通過計(jì)算屬性獲取初始值:{{count}}</p>
        <button @click="$store.commit('ChangeState')">改變屬性值</button>
        <button @click="$store.commit('ChangeStateWithPara',5)">傳遞參數(shù)改變屬性值</button>
   </div>
</template>

<script>
export default {
    name:'test',
    // 計(jì)算屬性
    computed:{
        count(){
            return this.$store.state.num;
        }
    }
}
</script>

效果：

3、Getter

有時(shí)候我們需要從store中的state中派生出一些狀態(tài)，例如根據(jù)num的值返回基數(shù)或者偶數(shù)。如果有多個(gè)組件需要用到這個(gè)狀態(tài)，那么我們就需要在每個(gè)組件里面都定義重復(fù)的一個(gè)函數(shù)，或者是定義成一個(gè)公共的函數(shù)，然后在多個(gè)組件里面導(dǎo)入，這兩種方式無論采用哪種都不是很理想的。這時(shí)候我們就需要用到getter了。官網(wǎng)解釋如下：

Vuex 允許我們?cè)?store 中定義“getter”（可以認(rèn)為是 store 的計(jì)算屬性）。就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。同樣，Getter接受state作為第一個(gè)參數(shù)?？聪旅娴睦樱?/p>

修改index.js文件如下：

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 添加全局引用
Vue.use(Vuex);

// 創(chuàng)建state
const state={
    // 定義num屬性并賦初始值為1
    num:1
}

// 改變狀態(tài)，通過commit
var mutations={
    // state作為第一個(gè)參數(shù)
    ChangeState(state){
        // 自增1
        state.num++;
    },
    // state作為第一個(gè)參數(shù),para作為第二個(gè)參數(shù)
    ChangeStateWithPara(state,para){
        // 自增1
        state.num += para;
    }
}

// Getter，相當(dāng)于store里面的計(jì)算屬性
var getters={
     IsOddOrEven(state){
         return state.num % 2==0?'偶數(shù)':'奇數(shù)'
     }
}
// 創(chuàng)建store對(duì)象
const store=new Vuex.Store({
     // 添加state
     state,
     // 導(dǎo)出mutations
     mutations,
     // 導(dǎo)出getter
     getters
})

// 導(dǎo)出創(chuàng)建的store對(duì)象
export default store;

那么該如何訪問getters呢？可以通過下面的幾種方式進(jìn)行訪問：

3.1、通過屬性進(jìn)行訪問

修改test.vue如下：

<template>
   <div>
        <p>初始值:{{this.$store.state.num}}</p>
        <p>通過計(jì)算屬性獲取初始值:{{count}}</p>
        <button @click="$store.commit('ChangeState')">改變屬性值</button>
        <button @click="$store.commit('ChangeStateWithPara',5)">傳遞參數(shù)改變屬性值</button>
        <!--通過屬性訪問getters-->
        <p>通過屬性訪問getters:{{$store.getters.IsOddOrEven}}</p>
   </div>
</template>

<script>
export default {
    name:'test',
    // 計(jì)算屬性
    computed:{
        count(){
            return this.$store.state.num;
        }
    }
}
</script>

效果：

3.2、通過輔助函數(shù)進(jìn)行訪問

vuex中提供了mapGetters輔助函數(shù)，mapGetters輔助函數(shù)僅僅是將store中的getter映射到局部計(jì)算屬性：

修改text.vue如下：

<template>
   <div>
        <p>初始值:{{this.$store.state.num}}</p>
        <p>通過計(jì)算屬性獲取初始值:{{count}}</p>
        <button @click="$store.commit('ChangeState')">改變屬性值</button>
        <button @click="$store.commit('ChangeStateWithPara',5)">傳遞參數(shù)改變屬性值</button>
        <!--通過屬性訪問getters-->
        <p>通過屬性訪問getters:{{$store.getters.IsOddOrEven}}</p>
        <!--通過輔助函數(shù)訪問getters-->
        <p>通過輔助函數(shù)訪問getters:{{IsOddOrEven}}</p>
   </div>
</template>

<script>
// 導(dǎo)入輔助函數(shù)
import {mapGetters} from 'vuex'
export default {
    name:'test',
    // 計(jì)算屬性
    computed:{
        count(){
            return this.$store.state.num;
        },
        // 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中,數(shù)組里面是在getters里面定義的方法名稱，如果有多個(gè)
        // 則在數(shù)組里面添加多個(gè)即可
        ...mapGetters(['IsOddOrEven'])
    }
}
</script>

效果：

可以看出：通過屬性訪問和通過輔助函數(shù)訪問實(shí)現(xiàn)的效果是一樣的。

4、Action

Vuex官網(wǎng)對(duì)Action的解釋如下：

Action類似于Mutation，兩者的不同之處在于：

Action提交的是Mutation，而不是直接變更狀態(tài)。也就是說Action是用來管理Mutation的，執(zhí)行順序是先執(zhí)行Action，然后通過Action來觸發(fā)Mutation，最后在通過Mutation來變更狀態(tài)。
Action中可以包含異步操作，Mutation中只能包含同步操作。

看下面的例子：

修改index.js如下：

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 添加全局引用
Vue.use(Vuex);

// 創(chuàng)建state
const state={
    // 定義num屬性并賦初始值為1
    num:1
}

// 改變狀態(tài)，通過commit
var mutations={
    // state作為第一個(gè)參數(shù)
    ChangeState(state){
        // 自增1
        state.num++;
    },
    // state作為第一個(gè)參數(shù),para作為第二個(gè)參數(shù)
    ChangeStateWithPara(state,para){
        // 自增1
        state.num += para;
    }
}

// Getter，相當(dāng)于store里面的計(jì)算屬性
var getters={
     IsOddOrEven(state){
         return state.num % 2==0?'偶數(shù)':'奇數(shù)'
     }
}

// 用來管理mutations
var actions={
    ExecChangeState({commit}){
         // 執(zhí)行mutations里面定義的ChangeState方法
         commit('ChangeState');
    }
}
// 創(chuàng)建store對(duì)象
const store=new Vuex.Store({
     // 添加state
     state,
     // 導(dǎo)出mutations
     mutations,
     // 導(dǎo)出getter
     getters,
     // 導(dǎo)出actions
     actions
})

// 導(dǎo)出創(chuàng)建的store對(duì)象
export default store;

4.1、通過dispatch觸發(fā)

修改test.vue如下：

<template>
   <div>
        <p>初始值:{{this.$store.state.num}}</p>
        <p>通過計(jì)算屬性獲取初始值:{{count}}</p>
        <button @click="$store.commit('ChangeState')">改變屬性值</button>
        <button @click="$store.commit('ChangeStateWithPara',5)">傳遞參數(shù)改變屬性值</button>
        <!--通過屬性訪問getters-->
        <p>通過屬性訪問getters:{{$store.getters.IsOddOrEven}}</p>
        <!--通過輔助函數(shù)訪問getters-->
        <p>通過輔助函數(shù)訪問getters:{{IsOddOrEven}}</p>
        <!--演示Action-->
        <div>
            <p>屬性值:{{count}}</p>
            <button @click="add">通過action改變屬性值</button>
        </div>
   </div>
</template>

<script>
// 導(dǎo)入輔助函數(shù)
import {mapGetters} from 'vuex'
export default {
    name:'test',
    // 計(jì)算屬性
    computed:{
        count(){
            return this.$store.state.num;
        },
        // 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中,數(shù)組里面是在getters里面定義的方法名稱，如果有多個(gè)
        // 則在數(shù)組里面添加多個(gè)即可
        ...mapGetters(['IsOddOrEven'])
    },
    methods:{
        add(){
            // 通過dispatch觸發(fā)actions里面的ExecChangeState
            this.$store.dispatch('ExecChangeState');
        }
    }
}
</script>

效果：

下面看一下執(zhí)行順序：

分別在add()、ExecChangeState()、ChangeState()里面添加一句console.log()來查看執(zhí)行順序：

index.js修改如下：

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 添加全局引用
Vue.use(Vuex);

// 創(chuàng)建state
const state={
    // 定義num屬性并賦初始值為1
    num:1
}

// 改變狀態(tài)，通過commit
var mutations={
    // state作為第一個(gè)參數(shù)
    ChangeState(state){
        console.log("mutations");
        // 自增1
        state.num++;
    },
    // state作為第一個(gè)參數(shù),para作為第二個(gè)參數(shù)
    ChangeStateWithPara(state,para){
        // 自增1
        state.num += para;
    }
}

// Getter，相當(dāng)于store里面的計(jì)算屬性
var getters={
     IsOddOrEven(state){
         return state.num % 2==0?'偶數(shù)':'奇數(shù)'
     }
}

// 用來管理mutations
var actions={
    ExecChangeState({commit}){
         // 執(zhí)行mutations里面定義的ChangeState方法
         console.log("actions");
         commit('ChangeState');
    }
}
// 創(chuàng)建store對(duì)象
const store=new Vuex.Store({
     // 添加state
     state,
     // 導(dǎo)出mutations
     mutations,
     // 導(dǎo)出getter
     getters,
     // 導(dǎo)出actions
     actions
})

// 導(dǎo)出創(chuàng)建的store對(duì)象
export default store;

test.vue修改如下：

<template>
   <div>
        <p>初始值:{{this.$store.state.num}}</p>
        <p>通過計(jì)算屬性獲取初始值:{{count}}</p>
        <button @click="$store.commit('ChangeState')">改變屬性值</button>
        <button @click="$store.commit('ChangeStateWithPara',5)">傳遞參數(shù)改變屬性值</button>
        <!--通過屬性訪問getters-->
        <p>通過屬性訪問getters:{{$store.getters.IsOddOrEven}}</p>
        <!--通過輔助函數(shù)訪問getters-->
        <p>通過輔助函數(shù)訪問getters:{{IsOddOrEven}}</p>
        <!--演示Action-->
        <div>
            <p>屬性值:{{count}}</p>
            <button @click="add">通過action改變屬性值</button>
        </div>
   </div>
</template>

<script>
// 導(dǎo)入輔助函數(shù)
import {mapGetters} from 'vuex'
export default {
    name:'test',
    // 計(jì)算屬性
    computed:{
        count(){
            return this.$store.state.num;
        },
        // 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中,數(shù)組里面是在getters里面定義的方法名稱，如果有多個(gè)
        // 則在數(shù)組里面添加多個(gè)即可
        ...mapGetters(['IsOddOrEven'])
    },
    methods:{
        add(){
            // 通過dispatch觸發(fā)actions里面的ExecChangeState
            console.log("觸發(fā)add()");
            this.$store.dispatch('ExecChangeState');
        }
    }
}
</script>

效果：

從上圖可以看出執(zhí)行順序是：先執(zhí)行組件中的方法，然后執(zhí)行actions，最后在執(zhí)行mutations，最終通過mutations更新狀態(tài)。

4.2、通過輔助函數(shù)觸發(fā)

除了使用dispatch()觸發(fā)actions以外，還可以使用輔助函數(shù)mapActions，輔助函數(shù)mapActions將組件中的methods映射為store.dispatch。修改test.vue如下：

<template>
   <div>
        <p>初始值:{{this.$store.state.num}}</p>
        <p>通過計(jì)算屬性獲取初始值:{{count}}</p>
        <button @click="$store.commit('ChangeState')">改變屬性值</button>
        <button @click="$store.commit('ChangeStateWithPara',5)">傳遞參數(shù)改變屬性值</button>
        <!--通過屬性訪問getters-->
        <p>通過屬性訪問getters:{{$store.getters.IsOddOrEven}}</p>
        <!--通過輔助函數(shù)訪問getters-->
        <p>通過輔助函數(shù)訪問getters:{{IsOddOrEven}}</p>
        <!--演示Action-->
        <div>
            <p>屬性值:{{count}}</p>
            <button @click="add">通過action改變屬性值</button>
        </div>
        <!--通過輔助函數(shù)觸發(fā)actions-->
        <div>
            <p>屬性值:{{count}}</p>
            <button @click="ExecChangeState">通過輔助函數(shù)改變屬性值</button>
        </div>
   </div>
</template>

<script>
// 導(dǎo)入輔助函數(shù)
import {mapGetters, mapActions} from 'vuex'
export default {
    name:'test',
    // 計(jì)算屬性
    computed:{
        count(){
            return this.$store.state.num;
        },
        // 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中,數(shù)組里面是在getters里面定義的方法名稱，如果有多個(gè)
        // 則在數(shù)組里面添加多個(gè)即可
        ...mapGetters(['IsOddOrEven'])
    },
    methods:{
        add(){
            // 通過dispatch觸發(fā)actions里面的ExecChangeState
            console.log("觸發(fā)add()");
            this.$store.dispatch('ExecChangeState');
        },
        // 輔助函數(shù) mapActions輔助函數(shù)將組件中的methods映射為store.dispatch
        // 這里表示將'this.ExecChangeState'映射為'this.$store.dispatch('ExecChangeState')'
        ...mapActions(['ExecChangeState'])
    }
}
</script>

效果：

到了這里，可能有人會(huì)問：通過actions的方式進(jìn)行管理mutations比直接使用mutations更復(fù)雜了，為什么還要這么做呢？實(shí)際上并非如此，mutations只能執(zhí)行同步方法，Action就不受此限制，我們可以在actions內(nèi)部執(zhí)行異步方法，看下面的例子：

修改index.js，添加異步方法，代碼如下：

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 添加全局引用
Vue.use(Vuex);

// 創(chuàng)建state
const state={
    // 定義num屬性并賦初始值為1
    num:1
}

// 改變狀態(tài)，通過commit
var mutations={
    // state作為第一個(gè)參數(shù)
    ChangeState(state){
        console.log("mutations");
        // 自增1
        state.num++;
    },
    // state作為第一個(gè)參數(shù),para作為第二個(gè)參數(shù)
    ChangeStateWithPara(state,para){
        // 自增1
        state.num += para;
    }
}

// Getter，相當(dāng)于store里面的計(jì)算屬性
var getters={
     IsOddOrEven(state){
         return state.num % 2==0?'偶數(shù)':'奇數(shù)'
     }
}

// 用來管理mutations
var actions={
    ExecChangeState({commit}){
         // 執(zhí)行mutations里面定義的ChangeState方法
         console.log("actions");
         commit('ChangeState');
    },
    // 執(zhí)行異步方法:點(diǎn)擊按鈕5秒之后再改變屬性的值
    ExecChangeStateAsync({commit}){
        setTimeout(() => {
           commit('ChangeState')
        }, 5000);
    }
}
// 創(chuàng)建store對(duì)象
const store=new Vuex.Store({
     // 添加state
     state,
     // 導(dǎo)出mutations
     mutations,
     // 導(dǎo)出getter
     getters,
     // 導(dǎo)出actions
     actions
})

// 導(dǎo)出創(chuàng)建的store對(duì)象
export default store;

修改test.vue文件：

<template>
   <div>
        <p>初始值:{{this.$store.state.num}}</p>
        <p>通過計(jì)算屬性獲取初始值:{{count}}</p>
        <button @click="$store.commit('ChangeState')">改變屬性值</button>
        <button @click="$store.commit('ChangeStateWithPara',5)">傳遞參數(shù)改變屬性值</button>
        <!--通過屬性訪問getters-->
        <p>通過屬性訪問getters:{{$store.getters.IsOddOrEven}}</p>
        <!--通過輔助函數(shù)訪問getters-->
        <p>通過輔助函數(shù)訪問getters:{{IsOddOrEven}}</p>
        <!--演示Action-->
        <div>
            <p>屬性值:{{count}}</p>
            <button @click="add">通過action改變屬性值</button>
        </div>
        <!--通過輔助函數(shù)觸發(fā)actions-->
        <div>
            <p>屬性值:{{count}}</p>
            <button @click="ExecChangeState">通過輔助函數(shù)改變屬性值</button>
        </div>
        <!--執(zhí)行異步actions-->
        <div>
            <p>屬性值:{{count}}</p>
            <button @click="ExecChangeStateAsync">通過異步方法改變屬性值</button>
        </div>
   </div>
</template>

<script>
// 導(dǎo)入輔助函數(shù)
import {mapGetters, mapActions} from 'vuex'
export default {
    name:'test',
    // 計(jì)算屬性
    computed:{
        count(){
            return this.$store.state.num;
        },
        // 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中,數(shù)組里面是在getters里面定義的方法名稱，如果有多個(gè)
        // 則在數(shù)組里面添加多個(gè)即可
        ...mapGetters(['IsOddOrEven'])
    },
    methods:{
        add(){
            // 通過dispatch觸發(fā)actions里面的ExecChangeState
            console.log("觸發(fā)add()");
            this.$store.dispatch('ExecChangeState');
        },
        // 輔助函數(shù) mapActions輔助函數(shù)將組件中的methods映射為store.dispatch
        // 這里表示將'this.ExecChangeState'映射為'this.$store.dispatch('ExecChangeState')'
        // 這里表示將'this.ExecChangeStateAsync'映射為'this.$store.dispatch('ExecChangeStateAsync')'
        ...mapActions(['ExecChangeState','ExecChangeStateAsync'])
    }
}
</script>

效果：

5、Module

由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store對(duì)象就有可能變得相當(dāng)臃腫。為了解決上面的問題，Vuex允許我們將store分割成模塊(Module)。每個(gè)模塊都有自己的state、mutation、action、getter。

五、總結(jié)

通過上面的基本講解，了解了Vuex的一些基本用法，Vuex在進(jìn)行狀態(tài)管理方面很方便，但并不是說Vue項(xiàng)目中就一定要使用Vuex，在Vuex中也可以不使用Vuex。下面總結(jié)一下Vuex中的核心概念和底層原理

1、核心概念

State：this.$store.state.xxx 取值
Getter：this.$store.getters.xxx 取值
Mutation：this.$store.commit('xxx') 賦值改變狀態(tài)，只能調(diào)用同步方法
Action：this.$store.dispatch('xxx') 賦值，不能直接更改狀態(tài)，最后還是要通過commit更改狀態(tài)，可以操作異步方法。
Module：模塊

2、底層原理

State：提供一個(gè)響應(yīng)式數(shù)據(jù)；
Getter：借助Vue的計(jì)算屬性computed來實(shí)現(xiàn)緩存；
Mutation：更改State狀態(tài)；
Action：觸發(fā)mutation方法；
Module：Vue.set動(dòng)態(tài)添加state到響應(yīng)式數(shù)據(jù)中；

到此這篇關(guān)于Vuex詳細(xì)介紹和使用方法的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

Vuex詳細(xì)介紹和使用方法

目錄

一、什么是Vuex

二、運(yùn)行機(jī)制

三、創(chuàng)建項(xiàng)目

1、使用腳手架搭建Vue項(xiàng)目

2、安裝Vuex

3、啟動(dòng)項(xiàng)目

4、配置使用Vuex

4.1、創(chuàng)建store文件夾

4.2、配置全局使用store對(duì)象

四、Vuex核心概念

1、state

2、mutations

3、Getter

3.1、通過屬性進(jìn)行訪問

3.2、通過輔助函數(shù)進(jìn)行訪問

4、Action

4.1、通過dispatch觸發(fā)

4.2、通過輔助函數(shù)觸發(fā)

5、Module

五、總結(jié)

1、核心概念

2、底層原理

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

Vuex詳細(xì)介紹和使用方法

目錄

一、什么是Vuex

二、運(yùn)行機(jī)制

三、創(chuàng)建項(xiàng)目

1、使用腳手架搭建Vue項(xiàng)目

2、安裝Vuex

3、啟動(dòng)項(xiàng)目

4、配置使用Vuex

4.1、創(chuàng)建store文件夾

4.2、配置全局使用store對(duì)象

四、Vuex核心概念

1、state

2、mutations

3、Getter

3.1、通過屬性進(jìn)行訪問

3.2、通過輔助函數(shù)進(jìn)行訪問

4、Action

4.1、通過dispatch觸發(fā)

4.2、通過輔助函數(shù)觸發(fā)

5、Module

五、總結(jié)

1、核心概念

2、底層原理

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

一、什么是Vuex

二、運(yùn)行機(jī)制

三、創(chuàng)建項(xiàng)目

1、使用腳手架搭建Vue項(xiàng)目

2、安裝Vuex

3、啟動(dòng)項(xiàng)目

4、配置使用Vuex

4.2、配置全局使用store對(duì)象

1、state

3、Getter

4、Action

4.2、通過輔助函數(shù)觸發(fā)

5、Module

1、核心概念

2、底層原理