vuex 的使用

參考官方文檔
https://vuex.vuejs.org/zh-cn/

Vuex 是什么？

官方是這么解釋的：

Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(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)試功能。

讀完了，你發(fā)現(xiàn)，這說(shuō)的啥啊？完全沒(méi)有看懂啊？
好吧！那就簡(jiǎn)單總結(jié)一句話，vuex就是處理vue中組件之間通信的
有了這個(gè)，你再也不用煩惱vue跨組件通信了。
因?yàn)閂uex里的數(shù)據(jù)都是響應(yīng)式的，任何組件使用同一store的數(shù)據(jù)，
只要store的數(shù)據(jù)變化，與之對(duì)應(yīng)的組件都會(huì)立即變化

安裝

npm安裝

npm install vuex --save

CDN
https://unpkg.com/vuex
這種方式引入的話，要放在vue.js后邊
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>


裝好后怎么使用它？
首先在src目錄下建立一個(gè)store文件，再這個(gè)文件夾下新建一個(gè)index.js,打開(kāi)index.js

寫(xiě)入代碼

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

Vue.use(Vuex)

export default new Vuex.Store({

})
或者
const store =  new Vuex.Store({

})
export default store

在main.js引入這個(gè)文件

// index.js創(chuàng)建完畢然后打開(kāi)main.js
import Vue from 'vue'

import App from './App'

// 引入store文件下的index.js,如果你是index.js文件
// 引入的時(shí)候可以省略index.js,若是其它文件名.js請(qǐng)全部引入
// 比如：import store from './store/store.js'
import store from './store'


new Vue({
  el: '#app',
  store, // 然后再這里使用一下
  components: { App },
  template: '<App/>'
})

下邊介紹核心概念就4個(gè)

State  
Getter
Mutation
Action
廢話不多說(shuō)，啥意思看官方解釋?zhuān)@里只說(shuō)怎么用

State

state干啥的，官方解釋一大堆，看完了我也覺(jué)得懵逼，這是啥??？
其實(shí)state簡(jiǎn)單理解就是存儲(chǔ)數(shù)據(jù)的，相當(dāng)于我們的.vue文件里的data里造數(shù)據(jù)差不多

打開(kāi)store文件下的index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    //這里我們創(chuàng)建個(gè)數(shù)組
    foodlist:[
      {name:'大米',price:20,count:5},
      {name:'雞腿',price:10,count:8},
      {name:'沙拉',price:5,count:10},
      {name:'土豆',price:13,count:2}
    ]
  }
})

準(zhǔn)備兩個(gè)組件(名字你隨意?。?/h3>

Header.vue

// 在Header.vue中拿到存在state里的數(shù)據(jù)然后渲染在頁(yè)面中
// 1.直接使用$store.state.foodlist獲取state里的數(shù)據(jù)(你在state里定義的是什么名字就用什么名字)
<template>
    <div class="header">
        <span>食物</span>
        <span>價(jià)格</span>
        <span>數(shù)量</span>
        <ul>
            <li v-for="(food,index) in list" :key="index">
               {{food.name}}———{{food.price}}————{{food.count}}    
            </li> 
        </ul>  
    </div>
</template>

<script>
export default {
    data(){
        return{
            list:this.$store.state.foodlist
        }
    }
};
</script>

<style scoped>
span{
    margin-left: 40px;
}
.header {
  width: 600px;
  height: 200px;
  margin-left: 50px;
  border: 1px solid #000;
  background-color: antiquewhite;
}
</style>

Foot.vue

<template>
    <div class="foot">
        <span>食物</span>
        <span>價(jià)格</span>
        <span>數(shù)量</span>
        <ul>
            <li v-for="(food,index) in list" :key="index">
               {{food.name}}———{{food.price}}————{{food.count}}    
            </li> 
        </ul>  
    </div>
</template>

<script>
export default {
    data(){
        return{
            list:this.$store.state.foodlist
        }
    }
};
</script>

<style scoped>
span{
    margin-left: 40px;
}
.foot {
  width: 600px;
  height: 200px;
  margin-left: 50px;
  background-color: azure;
  border: 1px solid #000;
  margin-top: 50px;
}
</style>


使用了$store
兩個(gè)組件的數(shù)據(jù)是不是一毛一樣！這時(shí)候不同的組件就都拿到了數(shù)據(jù)
后邊的3個(gè)方法就只用一個(gè)組件測(cè)試了！其它組件用法都一樣的

改寫(xiě)header.vue

// 上邊這種方法雖然也可以拿到數(shù)據(jù)，但官方推薦使用計(jì)算屬性的方式獲取數(shù)據(jù)
<template>
    <div class="foot">
        <span>食物</span>
        <span>價(jià)格</span>
        <span>數(shù)量</span>
        <ul>
            <li v-for="(food,index) in getList" :key="index">
               {{food.name}}———{{food.price}}————{{food.count}}    
            </li> 
        </ul>  
    </div>
</template>

<script>
export default {
    computed:{
        // 定義一個(gè)方法，return 你的數(shù)據(jù)
        getList(){
            return this.$store.state.foodlist;
        }
    }
};
</script>

Mutation

這里不先說(shuō)getter,因?yàn)楹芎妹靼?，state存數(shù)據(jù)，那getter看名字就知道是取數(shù)據(jù),因?yàn)橐呀?jīng)有$store.state可以
取到數(shù)據(jù)了，我們等會(huì)說(shuō)getter，這里我們說(shuō)改變數(shù)據(jù),在組件內(nèi)，來(lái)自store的數(shù)據(jù)只能讀取,那我們肯定想怎么改
state里的數(shù)據(jù),而修改store里的數(shù)據(jù)的唯一途徑就是顯示的提交mutation,啥意思??！看不懂最后一句，沒(méi)有關(guān)系，
我們知道你有改數(shù)據(jù)的需求的地方，只會(huì)在某一個(gè)組件內(nèi)，而你不可能手動(dòng)去store里改，因?yàn)閟tate里的數(shù)據(jù)都是接口
請(qǐng)求下來(lái)的，那么怎么改呢，我們需要用$store.commit(),官方解釋的這個(gè)方法是在組件內(nèi)向store里顯示提交mutation

說(shuō)白了，就是在你的mutation里先定義好了一個(gè)操作state里的數(shù)據(jù)的方法，然后在你的組件里調(diào)一下你定義
-----------------------------------------------------

在mutation里那個(gè)的方法名，不過(guò)需要注意的是mutation里的方法不推薦進(jìn)行異步操作，這個(gè)我們等會(huì)說(shuō)
-----------------------------------

打開(kāi)store的js文件

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

Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    //這里我們創(chuàng)建個(gè)數(shù)組
    foodlist:[
      {name:'大米',price:20,count:5},
      {name:'雞腿',price:10,count:8},
      {name:'沙拉',price:5,count:10},
      {name:'土豆',price:13,count:2}
    ]
  },
  mutations:{
    // 定義一個(gè)增加價(jià)格的方法
    addPrice(state){
        // 先遍歷數(shù)組，獲取到價(jià)格屬性
        state.foodlist.forEach(e => {
          //這里得到每一個(gè)對(duì)象
            //console.log(e) 
            e.price +=5; //每次點(diǎn)擊+5
        });
    }
  }
})

Header.vue文件中調(diào)用

// 準(zhǔn)備一個(gè)點(diǎn)擊事件(樣式代碼就不貼了)
<template>
    <div class="foot">
        <span>食物</span>
        <span>價(jià)格</span>
        <span>數(shù)量</span>
        <ul>
            <li v-for="(food,index) in getList" :key="index">
               {{food.name}}———{{food.price}}————{{food.count}}    
            </li> 
        </ul>
        //按鈕點(diǎn)擊事件
        <button @click="add">點(diǎn)擊加5</button>  
    </div>
</template>

<script>
export default {
    computed:{
        getList(){
            return this.$store.state.foodlist;
        }
    },
    methods:{
        add(){
            // 這里調(diào)用你定義的增加價(jià)格的方法
            this.$store.commit('addPrice')
        }
    }
};
</script>

有裝vue-devtools插件的看的很清楚貼個(gè)圖

20180502231737513.png
// 這里也是接受傳參的,修改代碼傳個(gè)參數(shù)5
<script>
export default {
    computed:{
        getList(){
            return this.$store.state.foodlist;
        }
    },
    methods:{
        add(){
            this.$store.commit('addPrice',5)
        }
    }
};
</script>

store里的js

// mutation 默認(rèn)接收的第一個(gè)參數(shù)就是state
mutations:{
  // 定義一個(gè)增加價(jià)格的方法
  addPrice(state,num){
      // 先遍歷數(shù)組，獲取到價(jià)格屬性
      state.foodlist.forEach(e => {
        //這里得到每一個(gè)對(duì)象
          //console.log(e) 
          e.price +=num; //每次點(diǎn)擊+5
      });
  }
}
1.png

mutation 異步操作出現(xiàn)的問(wèn)題

上邊說(shuō)過(guò)，mutation里的方法不推薦進(jìn)行異步操作，那會(huì)出現(xiàn)什么問(wèn)題，
這里我們用延時(shí)模擬個(gè)異步，我們點(diǎn)擊按鈕進(jìn)行+5的操作，2秒后讓頁(yè)面數(shù)據(jù)改變

打開(kāi)store下的js文件

// 模擬延時(shí)2秒
  mutations:{
    // 定義一個(gè)增加價(jià)格的方法
    addPrice(state,num){
        // 先遍歷數(shù)組，獲取到價(jià)格屬性
        state.foodlist.forEach(e => {
            setTimeout(function(){
              e.price +=num;
            },2000) //延時(shí)2秒
        });
    }
  }


這時(shí)候你在頁(yè)面中點(diǎn)擊按鈕一次，過(guò)了兩秒，數(shù)據(jù)改變了，當(dāng)你連點(diǎn)時(shí)，你會(huì)發(fā)現(xiàn)你都不點(diǎn)了，數(shù)據(jù)還在頁(yè)面中慢慢變化，
這顯然不是我們想要的，這時(shí)候你打開(kāi)控制臺(tái)，你會(huì)看到方法都執(zhí)行了，數(shù)據(jù)還沒(méi)有變化，知道運(yùn)行到最后一次執(zhí)行的時(shí)
候，數(shù)據(jù)才變化完，這個(gè)時(shí)候我們就要用另一個(gè)屬性了action
2.png

Action

action和muation很像，只不過(guò)不同的是action里提交的mutation，啥意思？
就是在action屬性里調(diào)用的是mutation里的方法，而且只能對(duì)mutation進(jìn)行操作

打開(kāi)store下的js文件

// 添加action屬性

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

Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    //這里我們創(chuàng)建個(gè)數(shù)組
    foodlist:[
      {name:'大米',price:20,count:5},
      {name:'雞腿',price:10,count:8},
      {name:'沙拉',price:5,count:10},
      {name:'土豆',price:13,count:2}
    ]
  },
  mutations:{
    // 定義一個(gè)增加價(jià)格的方法
    addPrice(state,num){
        // 先遍歷數(shù)組，獲取到價(jià)格屬性
        state.foodlist.forEach(e => {
          //這里得到每一個(gè)對(duì)象
            //console.log(e) 
            e.price +=num; //每次點(diǎn)擊+5
        });
    }
  },
  actions:{
      Moniyibu(context){
        console.log(context)
        setTimeout(function(){
          context.commit('addPrice',5)
        },2000)
      }
  }
})

header.vue中

// 在組件內(nèi)觸發(fā) action 里的方法，只能通過(guò)$store.dispatch 來(lái)觸發(fā)
<template>
    <div class="foot">
        <span>食物</span>
        <span>價(jià)格</span>
        <span>數(shù)量</span>
        <ul>
            <li v-for="(food,index) in getfood" :key="index">
               {{food.name}}———{{food.price}}————{{food.count}}    
            </li> 
        </ul>
        <button @click="add">+</button>  
    </div>
</template>

<script>
export default {
    computed:{
        getList(){
            return this.$store.state.foodlist;
        },
        getfood(){
            return this.$store.getters.getfoodName
        }
    },
    methods:{
        add(){
        // 觸發(fā)action的方法Moniyibu
          this.$store.dispatch('Moniyibu',5)
        }
    }
};


這時(shí)候你再查看那個(gè)控制臺(tái)，你會(huì)發(fā)現(xiàn)，點(diǎn)擊按鈕，2秒鐘后方法才執(zhí)行

Getter

該說(shuō)的都說(shuō)了，最后來(lái)說(shuō)下getter,上邊說(shuō)了，getter也是獲取數(shù)據(jù)的，但它里邊的數(shù)據(jù)通常都是處理過(guò)的數(shù)據(jù)
比如有這樣一個(gè)需求，我們獲取state里食物價(jià)格大于10的數(shù)據(jù)

打開(kāi)store下的js文件

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

Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    //這里我們創(chuàng)建個(gè)數(shù)組
    foodlist:[
      {name:'大米',price:20,count:5},
      {name:'雞腿',price:10,count:8},
      {name:'沙拉',price:5,count:10},
      {name:'土豆',price:13,count:2}
    ]
  },
  // getters 使用
  getters:{
      // 獲取價(jià)格大于10的數(shù)據(jù)
      getfoodName:state =>{
        
        /**
         * filter 過(guò)濾，會(huì)根據(jù)你的判端條件進(jìn)行篩選，把滿足條件的數(shù)據(jù)返回組成一個(gè)新的數(shù)組,
         * 這里要把這個(gè)數(shù)組再return 回去，你也可以定一個(gè)變量接收這個(gè)新數(shù)組，然后return這個(gè)變量
         */
        return  state.foodlist.filter(foodname =>{
            //獲取每一條對(duì)象
            console.log(foodname) 
            // 返回每條數(shù)據(jù)價(jià)格大于10的數(shù)據(jù)
            return foodname.price > 10
        })
      }
  },
  mutations:{
    // 定義一個(gè)增加價(jià)格的方法
    addPrice(state,num){
        // 先遍歷數(shù)組，獲取到價(jià)格屬性
        state.foodlist.forEach(e => {
          //這里得到每一個(gè)對(duì)象
            //console.log(e) 
            e.price +=num; //每次點(diǎn)擊+5
        });
    }
  }
})

Header.vue中獲取getter里的數(shù)據(jù)

// 依舊寫(xiě)在計(jì)算屬性里 使用 $store.getters.getter里的方法名
<template>
    <div class="foot">
        <span>食物</span>
        <span>價(jià)格</span>
        <span>數(shù)量</span>
        <ul>
            <li v-for="(food,index) in getfood" :key="index">
               {{food.name}}———{{food.price}}————{{food.count}}    
            </li> 
        </ul>
        <button @click="add">+</button>  
    </div>
</template>

<script>
export default {
    computed:{
        getList(){
            return this.$store.state.foodlist;
        },
        getfood(){
            return this.$store.getters.getfoodName
        }
    },
    methods:{
        add(){
            this.$store.commit('addPrice',5)
        }
    }
};
</script>

文章來(lái)源--https://blog.csdn.net/qq_36407748/article/details/80174272

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容