小編在這里立一個(gè)flag，看完這篇文章大家收獲滿滿

🌸Vuex基礎(chǔ)教程🌸

• 一，Vuex概述:
• • 1，Vuex簡(jiǎn)述（官方定義）
  • 2，Vuex實(shí)現(xiàn)的功能
  • 3，Vuex運(yùn)用的好處
  • 4，Vuex運(yùn)用的時(shí)機(jī)
• 二，Vuex基本使用
• • 1，基本安裝步驟：
  • 2，基本使用：
  • • （1），state數(shù)據(jù)存放和拿取
    • （2），Vuex數(shù)據(jù)修改
    • （3），Vuex異步操作
• 三，Vuex的Getter使用
• • 1，簡(jiǎn)單介紹
  • • 2，使用步驟:

一，Vuex概述:

1，Vuex簡(jiǎn)述（官方定義）

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式 + 庫(kù)。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

2，Vuex實(shí)現(xiàn)的功能

小編帶大家來(lái)回憶Vue基礎(chǔ)知識(shí)里面的組件之間的傳值
組件之間傳值存在三種形式：
（1），父組件向子組件傳值
???實(shí)現(xiàn)：v-bind屬性綁定（自定義屬性值）
（2），子組件向父組件傳值
???實(shí)現(xiàn)：v-on事件綁定（this.$emit使用）
（3），子組件之間的傳值
???實(shí)現(xiàn)：EventBus
現(xiàn)在有Vuex,完全可以簡(jiǎn)化這一過(guò)程。

3，Vuex運(yùn)用的好處

既然Vue基礎(chǔ)的知識(shí)就可以實(shí)現(xiàn)任意組件之間的數(shù)據(jù)共享，為什么現(xiàn)在又去學(xué)習(xí)了解Vuex的使用：

Vuex運(yùn)用的好處
（1），Vuex實(shí)現(xiàn)數(shù)據(jù)的集中管理，易于后期的開(kāi)發(fā)和維護(hù)。
（2），能夠高效實(shí)現(xiàn)組件之間數(shù)據(jù)共享，提高開(kāi)發(fā)效率。
（3），存儲(chǔ)再Vuex里面的數(shù)據(jù)都是響應(yīng)式，能夠?qū)崿F(xiàn)數(shù)據(jù)和頁(yè)面的同步更新。

4，Vuex運(yùn)用的時(shí)機(jī)

在什么時(shí)候使用Vuex,也就是Vuex運(yùn)用的時(shí)機(jī)：
我們約定(那些大佬多年開(kāi)發(fā)經(jīng)驗(yàn))：對(duì)于需要實(shí)現(xiàn)組件之間數(shù)據(jù)共享的數(shù)據(jù)，建議放在Vuex里面管理你，對(duì)于組件的私有數(shù)據(jù)，直接放在data里面。

二，Vuex基本使用

1，基本安裝步驟：

（1），安裝Vuex依賴包
npm install vuex --save

（2），導(dǎo)入Vuex包

import Vuex from 'vuex' Vue.use(Vuex)

（3），創(chuàng)建store對(duì)象

// 共享vuex.store export default new Vuex.Store({state: {count: 10},getters: {},mutations: {},actions: {},modules: {} })

（4），將store對(duì)象掛載到vue實(shí)例

new Vue({ //掛載到vue實(shí)例上store,render: h => h(main) }).$mount('#app')

當(dāng)然使用vue腳手架就不用管這些操作
???注意要選Vuex配置

2，基本使用：

（1），state數(shù)據(jù)存放和拿取

?:數(shù)據(jù)存放：
下面是小編存放一個(gè)res數(shù)據(jù)，數(shù)據(jù)的初始化值為0

?:組件拿數(shù)據(jù)：
方法一：
直接：this.$store.state.res

方法二：
創(chuàng)建數(shù)據(jù)的映射關(guān)系：mapState

注意:
①：按需導(dǎo)入mapState函數(shù)
②：在計(jì)算屬性(computed)里面調(diào)用mapState函數(shù)，傳入數(shù)組參數(shù)[‘res’]，然后將函數(shù)展開(kāi)。
寫法：...mapState(['res'])

（2），Vuex數(shù)據(jù)修改

?小編先來(lái)錯(cuò)誤示范(抵制的寫法):
直接在組件里面修改state里面的數(shù)據(jù)

錯(cuò)誤原因：
①:直接在組件里面修改state里面的數(shù)據(jù)會(huì)造成Vuex管理數(shù)據(jù)變得不可靠。
②:代碼的后期維護(hù)成本較高，比如:當(dāng)state里面數(shù)據(jù)發(fā)生改變，很難到數(shù)據(jù)發(fā)生改變的原因和位置。

?下面式正確的數(shù)據(jù)修改方式(比較推薦寫法)：

可以將數(shù)據(jù)修改操作也交給Vuex來(lái)管理，利用 mutations
屬性注冊(cè)函數(shù)，將函數(shù)使用權(quán)交給組件，將函數(shù)的創(chuàng)建權(quán)收回Vuex管理。

?當(dāng)然也可以使用映射函數(shù)來(lái)實(shí)現(xiàn)(比較推薦寫法):

步驟：
①:按需導(dǎo)入mapMatuations
②:在methods里面調(diào)用函數(shù)
...mapMutations(['addres'])
③:函數(shù)調(diào)用：

完整代碼：

<script> import { mapState, mapMutations } from 'vuex'export default {// 計(jì)算屬性computed: {...mapState(['res'])},methods: {...mapMutations(['addres']),// 點(diǎn)擊res++btnfac1 () {this.$store.commit('addres')},btnfac2 () {this.addres()}} } </script>

（3），Vuex異步操作

對(duì)于異步操作Vuex也提供一套解決辦法
?小編先來(lái)錯(cuò)誤示范

直接在函數(shù)里面處理異步操作

最后效果：在頁(yè)面展示時(shí)，數(shù)據(jù)效果達(dá)到，都是在Vuex里面數(shù)據(jù)沒(méi)有變化。

?正確寫法(比較推薦)

可以將函數(shù)處理state數(shù)據(jù)放在Mutation里面管理，而將異步操作放在Actions里面操作。

?當(dāng)然也可以使用映射函數(shù)來(lái)實(shí)現(xiàn)(比較推薦寫法):

步驟：
①:按需導(dǎo)入mapAtions
②:在methods里面調(diào)用函數(shù)
...mapAtions(['addresasync'])
③:函數(shù)調(diào)用：

三，Vuex的Getter使用

1，簡(jiǎn)單介紹

???注意Getter屬性里面的操作不能夠修改state里面的數(shù)據(jù)，只能進(jìn)行數(shù)據(jù)的包裝。
就像下面這張圖：

2，使用步驟:

①：創(chuàng)建Getter(注意Geter位置)

②：調(diào)用Getter里面的屬性
<h1>{{this.$store.getters.showres}}</h1>

?當(dāng)然也可以使用映射函數(shù)來(lái)實(shí)現(xiàn)(比較推薦寫法):

步驟：
①：按需導(dǎo)入mapGetters函數(shù)
②：在計(jì)算屬性(computed)里面調(diào)用mapGetters函數(shù)，傳入數(shù)組參數(shù)[‘showres’]，然后將函數(shù)展開(kāi)。
寫法：...mapGetters(['showres'])

小編：薇薇的憨寶

總結(jié)

以上是生活随笔為你收集整理的Vuex基础教程(讲得基础透彻篇)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。