瞭解Vuex方法的使用初級篇

大溼兄發表於2019-03-01

簡介

Hellow,大家好啊有一週不見了呢，這周想要講一講Vuex方法的使用，不是state和mutations這麼簡單了，大家可以把這個當成是入門級教學來看，接下來我們進入正題。

瞭解Vuex的modules

有人可能問了問什麼要了解Vuex的modules，下面我來講講modules是什麼，當專案越來越大的時候,單個 store 檔案,肯定不是我們想要的, 所以就有了模組化這個概念。首先我們看看怎麼使用modules。

安裝Vuex

npm install vuex --save
cnpm install vuex --save
複製程式碼

建立stroe檔案，裡面新建index.js裡面這樣寫

// 引入vue 和 vuex
import Vue from `vue`
import Vuex from `vuex`

// 這裡需要use一下,固定寫法,記住即可
Vue.use(Vuex)

export default new Vuex.Store({
    //模組化vuex所以說就是相當於模組化讓store拆分成多個互不干擾
    modules: {
        people_vuex:people_vuex
    }
});
複製程式碼

這樣一個簡單的模組就載入載入進來了，我們在modules裡引入了people_vuex模組

Vuex modules模組引入後其他方法的引入及使用方法

Vuex modules引入成功之後這時還不能著急使用還得至少引入state才行，下面我們看看怎麼引入state

引入state之前先建立一個新的js檔案命名為people_vuex.js，之後再index.js中引入這個js檔案

// 引入vue 和 vuex
import Vue from `vue`
import Vuex from `vuex`
//看這裡在這裡引入people_vuex.js
import people_vuex from `./people_vuex`

// 這裡需要use一下,固定寫法,記住即可
Vue.use(Vuex)

export default new Vuex.Store({
    //模組化vuex所以說就是相當於模組化讓store拆分成多個互不干擾
    modules: {
        people_vuex:people_vuex
    }
})
複製程式碼

建立一個檔案還是不行還要建立一個people_state.js檔案，不過在這之前還是先補齊people_vuex.js的內容。

import people_state from `./people_state`
export default {
    state:people_state,
}
複製程式碼

這樣我們就看到了people_vuex.js引入state模組的people_state.js，這裡大家大概就知道我想說什麼了吧，通過modules引入模組people_vuex之後在people_vuex.js裡面就是people_vuex這塊的內容，一個獨立的模組就這樣建起來了，之後的引入我們在下面再進行講解，現在先補充state的內容。

people_state.js裡面這樣寫

const people_state={
    name:`hellow`
}

// 使用 export default 封裝，讓外部可以訪問
export default people_state;
複製程式碼

下一部全域性引入Vuex入口檔案，在main.js裡引入。

//引用vuex檔案入口
import store from `./store/index`

new Vue({
    ...
        store:store,
    ...
})
複製程式碼

之後新建一個a.vue裡面這樣去寫

<template>
    <div>
      {{getCoin}}
    </div>
</template>

<script>
export default {
    ...
        computed:{
            getCoin(){
              return this.$store.state.people_vuex.coin
            }
        }
    ...
}，
created(){
    console.log(this.$store.state.people_vuex.coin);
}
</script>
複製程式碼

通過this.$store查詢到我們存的資料記住兩點，一點是必須通過return的方式才能取到我們想要的值，要不然則會報錯，第二點則是想要找到我們通過模組存的store只能通過我們設定的模組名進行查詢，另外補充一句為了方便我在下面列印了我們取到的資料。大家可以跑起來看看。

下面我們講講mutations，之前我們的文章中有過簡介mutations的使用方法，如果大家有興趣可以去看看，不過這次有些略微不同。

Vuex與Busemit結合使用淺談Vuex使用方式

首先在store資料夾裡建立people_mutations.js

import people_state from `./people_state`
const people_mutations={
    updateCoin (people_state) {
            people_state.coin = `newName`
    }
}
export default people_mutations;
複製程式碼

之後在people_vuex.js引用people_mutations.js

import people_state from `./people_state`
import people_mutations from `./people_mutations`
export default {
    state:people_state,
    mutations:people_mutations
}
複製程式碼

第三步就是在vue檔案下使用了在a.vue檔案下這樣寫

<template>
    <div>
      {{getCoin}}
      <button v-on:click="changeCoin()">點選我切換</button>
    </div>
</template>

<script>
export default {
    ...
        computed:{
            getCoin(){
              return this.$store.state.people_vuex.coin
            }
        },
        methods:{
            changeCoin () {
                this.$store.commit(`updateCoin`);
            }
        }
    ...
}，
created(){
    console.log(this.$store.state.people_vuex.coin);
}
</script>
複製程式碼

這樣大家就可以看到具體的效果了。

正題

說了這麼多大家一定會奇怪為什麼我現在才開始正題，因為我這篇是Vuex的初級使用篇所以前面還是講的細一點，以免初學者不會前面的幾步，那我們就講不了後面的了。好了廢話不多說開始正題。

首先我們還是以一個demo為例，因為我是金融區塊鏈這塊的所以對於幣種的接觸還是比較多的，比如比特幣，萊特幣，以太幣等等，但是它們之間的單位並沒有共通之處，比如比特幣1比特幣等於是1億聰，又比如以太幣的單位是1萊特幣等於1e18Wei就是1後面18個零，那麼如果小夥伴們有興趣可以去了解一下，接下來進入模擬需求部分，現在需求提出想要將後端傳回來的數字使用逗號分隔開，這樣的方式顯示金額之後在轉賬時把後端傳過來的資料再次傳送給後端當然這之前還是需要改變一下數值的為了大家能看得清，那麼我們的思路就有了首先是接收後端的資料，之後進行資料處理，然後放在頁面上展示，在這之後會有一個變動的數值，最後將數值使用非同步方式傳送給後端，整個流程完畢。

第一步回顧我們上面講的東西，不過需要做一些小變動，我會在下面程式碼中註釋的，注意看。

//index.js這裡沒什麼需要特別講解的直接跳過也行
// 引入vue 和 vuex
import Vue from `vue`
import Vuex from `vuex`

// 這裡需要use一下,固定寫法,記住即可
Vue.use(Vuex)

export default new Vuex.Store({
    //模組化vuex所以說就是相當於模組化讓store拆分成多個互不干擾
    modules: {
        people_vuex:people_vuex
    }
});
複製程式碼

//people_state.js這裡一會會新增getters資料處理和actions非同步提交兩個方法
import people_state from `./people_state`
import people_mutations from `./people_mutations`
export default {
    state:people_state,
    mutations:people_mutations
}
複製程式碼

//people_state.js這裡把coin清空就行方便我們接收後端傳回來的值
const people_state={
    coin: ``
}
// 使用 export default 封裝，讓外部可以訪問
export default people_state;
複製程式碼

//people_mutations.js這裡是一個小重點注意看我下面的註釋
import people_state from `./people_state`
const people_mutations={
    //這裡是改變數值的方法
    updateCoin (people_state) {
        people_state.coin = `1000000100000100001000100101`
    },
    //這裡注意mutations裡面是可以傳入兩個值的注意前面一個值我們不用管重點是後面的值這個值就是後端傳回來的東西了，這裡要劃重點
    changeCoin (people_state,coin){
        people_state.coin = coin
    }
};
export default people_mutations;
複製程式碼

//a.vue這裡的使用方法也會略有不同注意
<template>
    <div>
      {{getCoin}}
      <button v-on:click="changeCoin()">點選我切換</button>
    </div>
</template>

<script>
export default {
    ...
        computed:{
            getCoin(){
              return this.$store.state.people_vuex.coin
            }
        },
        methods:{
            changeCoin () {
                this.$store.commit(`updateCoin`);
            }
        }，
        //注意這裡這裡我們模擬後端傳入的值在commit的第二個引數就是後端傳入的值
         initializeCoin () {
          this.$store.commit(`changeCoin`,`1001000100001000001000001`);
      }，
      created(){
        this.initializeCoin();
      }
    ...
}，
created(){
    console.log(this.$store.state.people_vuex.coin);
}
</script>
複製程式碼

前期的準備工作好了，接下來我們使用getters處理資料。首先新建people_getters.js

import people_state from `./people_state`
const people_getters={
    
}
export default people_getters
複製程式碼

資料處理之前講幾點，首先是getters方法我們可以看成是對資料的二次處理，我們拿到資料後想要怎麼處理就隨便了，但是一個處理方法裡面的處理方式是固定的，比如現在我想處理錢幣以逗號分隔開，那麼這個方法就只能處理與這個類似的東西，但是是getters還給我們了另外一個選擇就是在二次處理過後的資料再次新增一個方法對資料進行三次處理，這裡就不過多進行贅述了，方法同樣是傳入兩個引數，其中第二個引數是之前二次處理過的資料，下面貼一個程式碼大家看看就行

//理解就是對資料進行二次處理，至於處理方式就要看自己了，處理之後的，這裡要注意處理的方法是固定的不過不要擔心，這個函式是可以傳入下一個getters裡面進行處理的，Getters還將獲得其他getter作為第二個引數
xxxx: (a, b) => {
    return b.c.length
}
複製程式碼

上面的僅作為參考，下面我要講的是模擬需求中使用getters，廢話不多說看程式碼。

在people_vuex.js中引入people_getters.js

import people_state from `./people_state`
import people_mutations from `./people_mutations`
import people_getters from `./people_getters`
export default {
    state:people_state,
    mutations:people_mutations,
    getters:people_getters
}
複製程式碼

第二步寫一個資料處理方法，就是我們講的金額逗號間隔。

import people_state from `./people_state`
const people_getters={
    getReverseCoin: people_state => {
        //這個方法大家可以看看，是處理方式，傳入錢幣值之後進行處理
        if(people_state.coin)
        {
            people_state.coin = people_state.coin.toString().replace(/$|,/g,``);
            if(``==people_state.coin || isNaN(people_state.coin)){return `Not a Number ! `;}
            var sign = people_state.coin.indexOf("-")> 0 ? `-` : ``;
            var cents = people_state.coin.indexOf(".")> 0 ? people_state.coin.substr(people_state.coin.indexOf(".")) : ``;
            cents = cents.length>1 ? cents : `` ;
            people_state.coin = people_state.coin.indexOf(".")>0 ? people_state.coin.substring(0,(people_state.coin.indexOf("."))) : people_state.coin ;
            if(`` == cents){ if(people_state.coin.length>1 && `0` == people_state.coin.substr(0,1)){return `Not a Number ! `;}}
            else{if(people_state.coin.length>1 && `0` == people_state.coin.substr(0,1)){return `Not a Number ! `;}}
            for (var i = 0; i < Math.floor((people_state.coin.length-(1+i))/3); i++)
            {
                people_state.coin = people_state.coin.substring(0,people_state.coin.length-(4*i+3))+`,`+people_state.coin.substring(people_state.coin.length-(4*i+3));
            }
            return (sign + people_state.coin + cents);
        }
        //這裡注意必須return，不然會報錯，這裡就是處理過之後的資料了
        return people_state.coin
    },
};
export default people_getters
複製程式碼

下面我們看看怎麼使用getters方法，在下面我會對改變的地方進行標註。

<template>
    <div>
      {{getCoin}}
      <button v-on:click="changeCoin()">點選我切換</button>
    </div>
</template>

<script>
export default {
    ...
        computed:{
            getCoin(){
              //這裡就是變化的地方了使用$store.getters取到我們剛才定義的getReverseCoin方法
              return this.$store.getters.getReverseCoin
            }
        },
        methods:{
            changeCoin () {
                this.$store.commit(`updateCoin`);
                 // 在這裡列印出來明顯就可以看到處理過後的效果，就算使用mutations方法之後改變數值也是一樣會被處理
                 console.log(this.$store.getters.getReverseCoin);
            }
        }，
         initializeCoin () {
          this.$store.commit(`changeCoin`,`1001000100001000001000001`);
      }，
      created(){
        this.initializeCoin();
      }
    ...
}，
created(){
    console.log(this.$store.state.people_vuex.coin);
}
</script>
複製程式碼

之前上面講過getters可以傳入兩個引數，第二個引數是之前處理過的資料再次進行三次處理，但是這裡就貼一下使用方法，具體就不寫的這麼細了，大家有興趣可以去看看官方文件。

Vuex Getter官方文件

getters: {
  // 這裡的方法就是把第二個引數做處理之後丟擲，這裡就不細講了。
  doneTodosCount: (state, xxxx) => {
    return xxxx.a.length
  }
}
複製程式碼

既然前面的步驟都走完了，我們就應該走最後一步了，那就是actions非同步方法，首先先看看官方介紹。

Action 提交的是 mutation，而不是直接變更狀態。

Action 可以包含任意非同步操作。

這裡注意了上面說的 Action可以包含任意非同步操作，包括非同步請求之類的都可以包含進去，這裡我們就不講非同步請求只是講講Action的使用方法，不過也大概可以理解為在Action裡面寫一個請求方法這樣的，廢話不多說，直接上程式碼。

首先還是先新建一個people_actions.js，這裡注意一下下面的註釋

//這裡與以往的其他使用方式稍微有些不同，這裡引入了兩個js一個是一直都有引入的people_state.js，另一個是people_mutations.js這個就是我想要模擬的方法了，在改變state裡面的數值之後直接就可以請求。
import people_mutations from `./people_mutations`
import people_state from `./people_state`
//使用非同步方法呼叫mutations
const people_actions={
    updateCoinSubmit ({ commit }) {
        setTimeout(() => {
            //這裡的使用方法和vue檔案裡的方法一樣不過就是沒有這麼多的引用字首了直接使用commit就可以對mutations裡面的方法進行呼叫。
            commit(`updateCoin`)
            //這裡我特地把改變之後的數值列印出來了，數值是沒有進行過處理的，符合我們之前說的條件直接可以傳回後端使用。
            console.log(people_state.coin)
        }, 1000)
    }
};
export default people_actions
複製程式碼

之後在people_vuex.js中引用就行

import people_state from `./people_state`
import people_mutations from `./people_mutations`
import people_getters from `./people_getters`
import people_actions from `./people_actions`
export default {
    state:people_state,
    mutations:people_mutations,
    getters:people_getters,
    actions:people_actions
}
複製程式碼

最後在vue檔案中引用就行，這裡大家還是注意一下我的註釋，改變雖說不是很大但是還是得注意起來才行,下面貼程式碼。

<template>
    <div>
      {{getCoin}}
      <button v-on:click="changeCoin()">點選我切換</button>
    </div>
</template>

<script>
export default {
    ...
        computed:{
            getCoin(){
              return this.$store.getters.getReverseCoin
            }
        },
        methods:{
            changeCoin () {
                //這裡注意了actions的呼叫方法和mutations還是不同的，mutations使用commit就可以對其方法進行呼叫，然而mutations只能使用dispatch進行呼叫，所以這裡大家注意一下就行了。
                this.$store.dispatch(`updateCoinSubmit`);
                console.log(this.$store.getters.getReverseCoin);
            }
        }，
         initializeCoin () {
          this.$store.commit(`changeCoin`,`1001000100001000001000001`);
      }，
      created(){
        this.initializeCoin();
      }
    ...
}，
created(){
    console.log(this.$store.state.people_vuex.coin);
}
</script>
複製程式碼

其實actions還有一個分發 Action使用store.dispatch觸發，這裡就不講了，同樣有興趣的小夥伴可以去官網看看，到這裡我們需要講的Vuex的使用方法就講完了，但是這個依舊是很淺的使用方式，不會涉及過多深入的東西，下週我將帶領大家進一步深入Vuex理解裡面的更多東西。

下面是本期的全部程式碼，貼出來大家瞭解一下。

//a.vue
export default {
    ...
        computed:{
            getCoin(){
              return this.$store.getters.getReverseCoin
            }
        },
        methods:{
            changeCoin () {
                this.$store.dispatch(`updateCoinSubmit`);
                console.log(this.$store.getters.getReverseCoin);
            }
        }，
         initializeCoin () {
          this.$store.commit(`changeCoin`,`1001000100001000001000001`);
      }，
      created(){
        this.initializeCoin();
      }
    ...
}，
created(){
    console.log(this.$store.state.people_vuex.coin);
}
</script>
複製程式碼

//main.js
import store from `./store/index`

new Vue({
    ...
        store:store,
    ...
})
複製程式碼

//index.js
import Vue from `vue`
import Vuex from `vuex`
import people_vuex from `./people_vuex`
Vue.use(Vuex)
export default new Vuex.Store({
    modules: {
        people_vuex:people_vuex
    }
})
複製程式碼

//people_vuex.js
import people_state from `./people_state`
import people_mutations from `./people_mutations`
import people_getters from `./people_getters`
import people_actions from `./people_actions`
export default {
    state:people_state,
    mutations:people_mutations,
    getters:people_getters,
    actions:people_actions
}
複製程式碼

//people_state.js
const people_state={
    coin: ``
};
export default people_state;
複製程式碼

//people_mutations.js
import people_state from `./people_state`
const people_mutations={
    updateCoin (people_state) {
        people_state.coin = `1000000100000100001000100101`
    },
    changeCoin (people_state,coin){
        people_state.coin = coin
    }
};
export default people_mutations;
複製程式碼

//people_getters.js
import people_state from `./people_state`
const people_getters={
    getReverseCoin: people_state => {
        if(people_state.coin)
        {
            people_state.coin = people_state.coin.toString().replace(/$|,/g,``);
            if(``==people_state.coin || isNaN(people_state.coin)){return `Not a Number ! `;}
            var sign = people_state.coin.indexOf("-")> 0 ? `-` : ``;
            var cents = people_state.coin.indexOf(".")> 0 ? people_state.coin.substr(people_state.coin.indexOf(".")) : ``;
            cents = cents.length>1 ? cents : `` ;
            people_state.coin = people_state.coin.indexOf(".")>0 ? people_state.coin.substring(0,(people_state.coin.indexOf("."))) : people_state.coin ;
            if(`` == cents){ if(people_state.coin.length>1 && `0` == people_state.coin.substr(0,1)){return `Not a Number ! `;}}
            else{if(people_state.coin.length>1 && `0` == people_state.coin.substr(0,1)){return `Not a Number ! `;}}
            for (var i = 0; i < Math.floor((people_state.coin.length-(1+i))/3); i++)
            {
                people_state.coin = people_state.coin.substring(0,people_state.coin.length-(4*i+3))+`,`+people_state.coin.substring(people_state.coin.length-(4*i+3));
            }
            return (sign + people_state.coin + cents);
        }
        return people_state.coin
    },
};
export default people_getters
複製程式碼

//people_actions.js
import people_mutations from `./people_mutations`
import people_state from `./people_state`
const people_actions={
    updateCoinSubmit ({ commit }) {
        setTimeout(() => {
            commit(`updateCoin`)
            console.log(people_state.coin)
        }, 1000)
    }
};
export default people_actions
複製程式碼

最後是寫本文章之前借鑑的其他文章目錄瞭解一下。

Vuex 官網

vuex其實超簡單,只需3步

JS-為金額新增千分位逗號分割符

後記

這期文章雖說文字有些囉嗦，但是我還是希望你們能看到這裡，我想說的是新人可以看這篇文章入門，而老人們可以溫習一下，其實知識是永無止境的，我們在尋求知識的同時不應該把以前的東西丟下或者停止學習，三省吾身，這就是我要說的，謝謝大家觀看，下週再見。

Vuex 的使用方式（初級版）
2018-12-24
Vue
初級程式設計師應該瞭解的Linux命令
2015-08-10
程式設計師Linux
初學者Mybatis的初級使用
2018-11-19
MyBatis
【SSH框架初瞭解】
2017-06-04
框架
Jenkins 使用指南之初級應用篇
2021-02-08
Jenkins
C# TypeDescriptor初瞭解
2018-01-28
C#
深入瞭解 Java 方法和引數的使用方法
2024-02-18
Java
[Vuex系列] - 初嘗Vuex第一個例子
2019-04-21
Vue
Kotlin——初級篇（三）：資料型別詳解
2019-03-04
Kotlin資料型別
分享一篇文章 "深入瞭解 Go 方法"
2018-02-26
Go
Java執行緒池的瞭解使用—築基篇
2020-08-01
Java執行緒
一篇瞭解使用動態代理IP的便利
2021-09-11
Entity Framework 學習初級篇5--ObjectQuery查詢及方法
2009-05-13
FrameworkObject
一篇瞭解代理IP最常見的使用場景
2021-09-11
vuex2中使用mapGetters/mapActions報錯解決方法
2018-10-19
Vue
前端面試總結篇（初級）
2019-02-25
前端面試
vuex - 基礎篇
2019-02-26
Vue
一篇瞭解SOCKS5代理安全等級
2021-09-11
[Vuex系列] - Module的用法（終篇）
2019-05-09
Vue
一篇瞭解怎麼使用爬蟲代理IP
2021-09-11
爬蟲
Redis從入門到精通：初級篇
2018-04-25
Redis
css-水平居中、垂直居中（初級篇）
2017-12-18
CSS
Vuex的基本使用
2019-03-03
Vue
Promise入門到精通(初級篇)-附程式碼詳細講解
2021-01-11
Promise
學習Grafana初級使用
2020-11-22
Grafana
vuex詳細介紹和使用方法
2019-01-24
Vue
.NET Core CSharp初級篇類的生命歷程
2019-07-27
CSharp
一篇瞭解Java反射
2022-10-31
Java反射
一篇文章帶你瞭解和使用Promise物件
2020-11-09
Promise物件
Java工程師學習指南（初級篇）
2019-11-12
Java工程師
Java工程師學習指南初級篇
2019-03-10
Java工程師
vue中vuex,echarts,地圖,ueditor的使用(一篇就夠)
2018-06-11
VueEcharts地圖
瞭解資料庫的三級模式和二級映像
2017-08-11
資料庫模式
nsight 初級使用指南
2016-05-06
JDBC的初步瞭解及使用
2019-05-18
JDBC
這有一篇Nodejs+Express的初級指南……
2019-02-16
NodeJSExpress
【Vue 極速指南】Vuex 篇
2021-09-09
Vue
圖解 vuex
2019-03-03
圖解Vue

瞭解Vuex方法的使用初級篇

相關文章