Vuex的使用實(shí)例分析

這篇文章主要介紹“Vuex的使用實(shí)例分析”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vuex的使用實(shí)例分析”文章能幫助大家解決問(wèn)題。

Vuex 簡(jiǎn)介

1. 概念

在 Vue 中實(shí)現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個(gè) Vue 插件，對(duì) vue 應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間的通信

2. 使用場(chǎng)景

多個(gè)組件依賴于同一狀態(tài)

來(lái)自不同組件的行為需要變更同一狀態(tài)

3.  Vuex 工作原理

State 是存儲(chǔ)的單一狀態(tài)，是存儲(chǔ)的基本數(shù)據(jù)（把改變的數(shù)據(jù)給到 Vue Components）

Getters 是 store 的計(jì)算屬性，對(duì) state 的加工，是派生出來(lái)的數(shù)據(jù)。就像 computed 計(jì)算屬性一樣，getter 返回的值會(huì)根據(jù)它的依賴被緩存起來(lái)，且只有當(dāng)它的依賴值發(fā)生改變才會(huì)被重新計(jì)算

Actions 像一個(gè)裝飾器，提交 mutation，而不是直接變更狀態(tài)（actions 可以包含任何異步操作，如果有什么限制判斷條件，也是在 actions 中進(jìn)行操作）

Mutations 提交更改數(shù)據(jù)，使用 store.commit 方法更改 state 存儲(chǔ)的狀態(tài)（在 Mutations 不做任何判斷等操作，只做數(shù)據(jù)的處理，如果不需要進(jìn)行異步處理，可以直接把數(shù)據(jù)交到這里）

Module 是 store 分割的模塊，每個(gè)模塊擁有自己的 state、getters、mutations、actions

Vuex 提供了 mapState、MapGetters、MapActions、mapMutations 等輔助函數(shù)給開(kāi)發(fā)在 vm 中處理的 store

這里有一個(gè)很好理解 Vuex 的方法：把 Vue Components 當(dāng)作是去餐廳吃飯的顧客，Actions 就是餐廳的服務(wù)員，Mutations 是餐廳的后廚，State 是做好的菜，最后再展現(xiàn)給顧客。所以有什么需求找 Actions 說(shuō)就可以了，Mutations 只負(fù)責(zé)做菜

4. 搭建 Vuex 環(huán)境

1）打開(kāi) VScode 的控制臺(tái)，輸入 npm i vuex 進(jìn)行安裝，也可以通過(guò) Vuex 進(jìn)行下載安裝

2）創(chuàng)建一個(gè) store 文件夾，且在該文件夾中創(chuàng)建一個(gè) index.js 文件，文件中引入 import vuex from 'vuex'，通過(guò) Vue.use(Vuex) 就可以使用它了

3）在該 index.js 文件中配置 store，并配置暴露相關(guān)對(duì)象 export default new Vuex.Store({})

4）再在 main.js 文件中引入 store，import store from './store' （這里引入的其實(shí)是 store 文件夾下的 index.js 文件，因?yàn)槟J(rèn)找的就是文件夾的 index ，所以可以不寫），在 Vue 實(shí)例對(duì)象中引用，即寫上 store，這樣組件實(shí)例對(duì)象和 vm 上就都能看到 store 了

下面我們用 vuex 來(lái)寫一個(gè)案例：（最終的頁(yè)面效果如下圖所示）

前面進(jìn)行選擇每次要加的數(shù)，點(diǎn)擊加號(hào)可往上加，點(diǎn)擊減號(hào)也會(huì)對(duì)應(yīng)的減，當(dāng)當(dāng)前求和的為奇數(shù)時(shí)，后一個(gè)按鈕才有效，等一等再加，就是延遲 0.5 s 后再加

Count.vue 計(jì)算組件代碼（實(shí)現(xiàn)頁(yè)面的布局和調(diào)用方法）

<template>

    <!-- 實(shí)現(xiàn)頁(yè)面的布局 -->

    <div>

        <h2>當(dāng)前求和為:{{$store.state.sum}}</h2>

        <select v-model.number="n">

            <option value="1">1</option>

            <option value="2">2</option>

            <option value="3">3</option>

        </select>

        <button @click="increment">+</button>

        <button @click="decrement">-</button>

        <button @click="incrementOdd">當(dāng)前求和為奇數(shù)再加</button>

        <button @click="incrementWait">等一等再加</button>

    </div>

</template>

<script>

export default {

    name:'Count',

    data(){

        return {

            n:1,  //用戶選擇的數(shù)字

        }

    },

    methods: {

        increment(){

            this.$store.commit('ADD',this.n)

            //通過(guò) commit 調(diào)用 Mutations 里面的 ADD 方法

        },

        decrement(){

          this.$store.commit('DECREASE',this.n)

           //通過(guò) commit 調(diào)用 Mutations 里面的 DECREASE 方法

        },

        incrementOdd(){

          this.$store.dispatch('addOdd',this.n)

          // 通過(guò) dispatch 調(diào)用 actions 里面的 addOdd 方法

        },

        incrementWait(){

          this.$store.dispatch('addWait',this.n)

          // 通過(guò) dispatch 調(diào)用 actions 里面的 addWait 方法

        },

    },

}

</script>

<style lang="css">

    button{

        margin-left: 5px

    }

</style>

組件中讀取 vuex 中的數(shù)據(jù)：$store.state.sum 

組件中修改 vuex 中的數(shù)據(jù)：$store.dispatch('actions中的方法名'，數(shù)據(jù)) 或 $store.commit('mutations中的方法名'，數(shù)據(jù))

Store 文件夾中的 index.js 代碼（用 vuex 配置相關(guān)的函數(shù)或方法）

//該文件用于創(chuàng)建 Vue 中最核心的 store

import Vue from 'vue'

//引入Vuex

import Vuex from 'vuex'

// 應(yīng)用 Vuex 插件

Vue.use(Vuex)

//準(zhǔn)備 actions 用于響應(yīng)組件中的動(dòng)作

const actions = {

    // 實(shí)現(xiàn)為奇數(shù)的時(shí)候才加操作

    addOdd(context,value) {

        if (context.state.sum % 2) {

            context.commit('ADDODD',value)

        }

    },

    // 實(shí)現(xiàn)等到 0.5 s 才加的操作

    addWait(context, value) {

        setTimeout(() => {

            context.commit('ADDWAIT',value)

        }, 500);

    }

}

//準(zhǔn)備 mutations 用于操作數(shù)據(jù)（state）

const mutations = {

    //加操作

    ADD(state,value) {

        state.sum += value

    },

    //減操作

    DECREASE(state, value) {

        state.sum -= value

    },

    ADDODD(state, value) {

        state.sum += value

    },

    ADDWAIT(state, value) {

        state.sum += value

    }

}

//準(zhǔn)備 state 用于存儲(chǔ)數(shù)據(jù)

const state = {

    sum: 0  //當(dāng)前的和

}

//創(chuàng)建并暴露 store

export default new Vuex.Store({

    actions,

    mutations,

    state

})

其中 actions 對(duì)象中的每個(gè)方法都有一個(gè) context 和 value 形參，context 里面存放著基本你要用的所有數(shù)據(jù)，value 就是你傳進(jìn)來(lái)的數(shù)據(jù)

其中 mutations 對(duì)象中的每個(gè)方法都有 state 和 value 形參，第一個(gè)里面存放有 state 中的數(shù)據(jù)，value 也是傳進(jìn)來(lái)的數(shù)據(jù)

App.vue

<template>

  <Count />

</template>

<script>

import Count from './components/Count.vue'

export default {

  name: "App",

  components: {

    Count,

  },

}

</script>

main.js

//引入 Vue 

import Vue from 'vue'

//引入 App 

import App from './App.vue'

//引入 store

import store from './store/index.js'

Vue.config.productionTip = false

const vm = new Vue({

  render: h => h(App),

  store,  //使用 store

}).$mount('#app')

關(guān)于“Vuex的使用實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。