震驚！喝個茶的時間就學會了vuex

寫在前面

我很欣賞震驚部，由於他們的標題每次寫的都很好0.0

什麼是vuex

先給出官網地址

官方解釋: Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化
大白話：對數據(data)統一的管理,若是涉及到了數據的處理，來，到vuex裏面進出吧！就像是超市對商品的統一管理同樣

爲了使用vuex而作的準備

安裝vuex

npm install --save vuex
<!--這裏假定你已經搭好vue的開發環境了--> 
複製代碼

配置vuex

一、首先建立一個js文件，假定這裏取名爲store.js
二、在main.js文件中引入上面建立的store.js

//main.js內部對store.js的配置
import store from '"@/store/store.js' 
//具體地址具體路徑
new Vue({
    el: '#app',
    store, //將store暴露出來
    template: '<App></App>',
    components: { App }
});
複製代碼

store.js中的配置

import Vue from 'vue'; //首先引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex) 

export default new Vuex.Store({
    state: { 
        // state 相似 data
        //這裏面寫入數據
    },
    getters:{ 
        // getters 相似 computed 
        // 在這裏面寫個方法
    },
    mutations:{ 
        // mutations 相似methods
        // 寫方法對數據作出更改(同步操做)
    },
    actions:{
        // actions 相似methods
        // 寫方法對數據作出更改(異步操做)
    }
})

//可能有的地方書寫的風格不是這樣的，若是須要的瞭解的能夠百度看看其餘人的
複製代碼

好了，基本的配置到這裏就結束了，接下來咱們能夠開始使用它們了；
下面結合一個購物車示例，咱們來全面瞭解一下vuex的使用

開始使用vuex

咱們約定store中的數據是如下形式

state:{
    goods: {
        totalPrice: 0,
        totalNum:0,
        goodsData: [
            {
                id: '1',
                title: '好吃的蘋果',
                price: 8.00,
                image: 'https://www.shangdian.com/static/pingguo.jpg',
                num: 0
            },
            {
                id: '2',
                title: '美味的香蕉',
                price: 5.00,
                image: 'https://www.shangdian.com/static/xiangjiao.jpg',
                num: 0
            }
        ]
    }
},
getters:{ //其實這裏寫上這個主要是爲了讓你們明白他是怎麼用的，
    totalNum(state){
        let aTotalNum = 0;
        state.goods.goodsData.forEach((value,index) => {
            aTotalNum += value.num;
        })
        return aTotalNum;
     },
     totalPrice(state){
        let aTotalPrice = 0;
        state.goods.goodsData.forEach( (value,index) => {
            aTotalPrice += value.num * value.price
         })
         return aTotalPrice.toFixed(2);
    }
},
mutations:{
    reselt(state,msg){
        console.log(msg) //我執行了一次；
        state.goods.totalPrice = this.getters.totalPrice;
        state.goods.totalNum = this.getters.totalNum;
    },
    reduceGoods(state,index){ 
        //第一個參數爲默認參數，即上面的state,後面的參數爲頁面操做傳過來的參數
        state.goods.goodsData[index].num-=1;
        
        let msg = '我執行了一次'
        this.commit('reselt',msg);
    },
    addGoods(state,index){
        state.goods.goodsData[index].num+=1;
        
        let msg = '我執行了一次'
        this.commit('reselt',msg);
        /** 想要從新渲染store中的方法，一概使用commit 方法 你能夠這樣寫 commit('reselt',{ state: state }) 也能夠這樣寫 commit({ type: 'reselt', state: state }) 主要看你本身的風格 **/
    }
},
actions:{
    //這裏主要是操做異步操做的，使用起來幾乎和mutations方法如出一轍
    //除了一個是同步操做，一個是異步操做，這裏就很少介紹了，
    //有興趣的能夠本身去試一試
    //好比你能夠用setTimeout去嘗試一下
}
複製代碼

好了，簡單的數據咱們就這樣配置了，接下來看看購物車頁面吧；

第一種方式使用store.js中的數據(直接使用)

<template>
    <div id="goods" class="goods-box">
        <ul class="goods-body">
            <li v-for="(list,index) in goods.goodsData" :key="list.id">
                <div class="goods-main">
                    <img :src="list.image">
                </div>
                <div class="goods-info">
                    <h3 class="goods-title">{{ list.title }}</h3>
                    <p class="goods-price">¥ {{ list.price }}</p>
                    <div class="goods-compute">
                        <!--在dom中使用方法爲：$store.commit()加上store.js中的屬性的名稱，示例以下-->
                        <span class="goods-reduce" @click="$store.commit('reduceGoods',index)">-</span>
                        <input readonly v-model="list.num" />
                        <span class="goods-add" @click="$store.commit('addGoods',index)">+</span>
                    </div>
                </div>
            </li>
        </ul>
        <div class="goods-footer">
            <div class="goods-total">
                合計：¥ {{ goods.totalPrice }}
                <!-- 若是你想要直接使用一些數據，可是在computed中沒有給出來怎麼辦？ 能夠寫成這樣 {{ $store.state.goods.totalPrice }} 或者直接獲取gettles裏面的數據 {{ $store.gettles.totalPrice }} -->
            </div>
            <button class="goods-check" :class="{activeChecke: goods.totalNum <= 0}">去結帳({{ goods.totalNum }})</button>
        </div>
    </div>
</template>
<script> export default { name: 'Goods', computed:{ goods(){ return this.$store.state.goods; } } } </script>
複製代碼

若是上面的方式寫參數讓你看的很彆扭，咱們繼續看第二種方式

第一種方式使用store.js中的數據(經過輔助函數使用)

<!--goods.vue 購物車頁面-->
<template>
    <div id="goods" class="goods-box">
        <ul class="goods-body">
            <li v-for="(list,index) in goods.goodsData" :key="list.id">
                <div class="goods-main">
                    <img :src="list.image">
                </div>
                <div class="goods-info">
                    <h3 class="goods-title">{{ list.title }}</h3>
                    <p class="goods-price">¥ {{ list.price }}</p>
                    <div class="goods-compute">
                        <span class="goods-reduce" @click="goodsReduce(index)">-</span>
                        <input readonly v-model="list.num" />
                        <span class="goods-add" @click="goodsAdd(index)">+</span>
                    </div>
                </div>
            </li>
        </ul>
        <div class="goods-footer">
            <div class="goods-total">
                合計：¥ {{ goods.totalPrice }}
                <!-- getters裏面的數據能夠直接這樣寫 {{ totalPrice }} -->
            </div>
            <button class="goods-check" :class="{activeChecke: goods.totalNum <= 0}">去結帳({{ goods.totalNum }})</button>
        </div>
    </div>
</template>
<script> import {mapState,mapGetters,mapMutations} from 'vuex'; /** 上面大括弧裏面的三個參數，即是一一對應着store.js中的state,getters,mutations 這三個參數必須規定這樣寫，寫成其餘的單詞無效，切記 畢竟是這三個屬性的的輔助函數 **/ export default { name: 'Goods', computed:{ ...mapState(['goods']) ...mapGetters(['totalPrice','totalNum']) /** ‘...’ 爲ES6中的擴展運算符，不清楚的能夠百度查一下 若是使用的名稱和store.js中的同樣，直接寫成上面數組的形式就行， 若是你想改變一下名字，寫法以下 ...mapState({ goodsData: state => state.goods }) **/ }, methods:{ ...mapMutations(['reduceGoods','addGoods']), /** 這裏你能夠直接理解爲以下形式,至關於直接調用了store.js中的方法 reduceGoods(index){ // 這樣是否是以爲很熟悉了？ }, addGoods(index){ } 好，仍是不熟悉，咱們換下面這種寫法 onReduce(index){ //咱們在methods中定義了onReduce方法，相應的Dom中的click事件名要改爲onReduce this.reduceGoods(index) //這至關於調用了store.js的方法，這樣是否是以爲滿意了 } **/ } } </script>
複製代碼

最後來看看Module

在項目比較複雜的時候，數據所有寫在一個state 方法所有集中一個mutations中，將會使咱們的文件顯得太過於臃腫，並且不易維護，那怎麼辦呢？
仍是那句話辦法總比問題多，vuex爲咱們提供了module這樣一個模塊的概念。
咱們能夠利用它來根據咱們個個組件或者頁面所須要的數據一一分割成不一樣的模塊，看下面示例

const moduleA = {
  state: { /*data**/ },
  mutations: { /**方法**/ },
  actions: { /**方法**/ },
  getters: { /**方法**/ }
}

const moduleB = {
  state: { /*data**/ },
  mutations: { /**方法**/ },
  actions: { /**方法**/ }
  getters: { /**方法**/ }
}

export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

//那怎麼調用呢？看下面！

//在模塊內部使用
state.goods //這種使用方式和單個使用方式樣，直接使用就行

//在組件中使用
store.state.a.goods //先找到模塊的名字，再去調用屬性
store.state.b.goods //先找到模塊的名字，再去調用屬性
複製代碼

看看效果圖吧

寫在最後

謝謝你們的閱讀，若是本文讓你能有所收穫，深表榮幸，若是喜歡的，點個贊行 0.0

最後打一波廣告：歡迎你們關注個人微信公衆號：大前端js，固然爲了回饋你們關注，裏面我放了一些學習資源，熱烈歡迎你們關注交流前端方面但不侷限前端方面的知識；

以前發出來的有不少單詞出錯的地方，對這樣的錯誤，深表歉意，也很是感謝你們的指正

原創不易，非商業轉載時請註明出處與原文連接，商業轉載請獲得本人容許，謝謝！

文章講解的小例子已經放到GitHub上面去了，github項目地址，喜歡的話就給個Star吧 0.0