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

🌸Vuex基礎教程🌸

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

一，Vuex概述:

1，Vuex簡述（官方定義）

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式 + 庫。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

2，Vuex實現的功能

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

3，Vuex運用的好處

既然Vue基礎的知識就可以實現任意組件之間的數據共享，為什么現在又去學習了解Vuex的使用：

Vuex運用的好處
（1），Vuex實現數據的集中管理，易于后期的開發和維護。
（2），能夠高效實現組件之間數據共享，提高開發效率。
（3），存儲再Vuex里面的數據都是響應式，能夠實現數據和頁面的同步更新。

4，Vuex運用的時機

在什么時候使用Vuex,也就是Vuex運用的時機：
我們約定(那些大佬多年開發經驗)：對于需要實現組件之間數據共享的數據，建議放在Vuex里面管理你，對于組件的私有數據，直接放在data里面。

二，Vuex基本使用

1，基本安裝步驟：

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

（2），導入Vuex包

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

（3），創建store對象

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

（4），將store對象掛載到vue實例

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

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

2，基本使用：

（1），state數據存放和拿取

?:數據存放：
下面是小編存放一個res數據，數據的初始化值為0

?:組件拿數據：
方法一：
直接：this.$store.state.res

方法二：
創建數據的映射關系：mapState

注意:
①：按需導入mapState函數
②：在計算屬性(computed)里面調用mapState函數，傳入數組參數[‘res’]，然后將函數展開。
寫法：...mapState(['res'])

（2），Vuex數據修改

?小編先來錯誤示范(抵制的寫法):
直接在組件里面修改state里面的數據

錯誤原因：
①:直接在組件里面修改state里面的數據會造成Vuex管理數據變得不可靠。
②:代碼的后期維護成本較高，比如:當state里面數據發生改變，很難到數據發生改變的原因和位置。

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

可以將數據修改操作也交給Vuex來管理，利用 mutations
屬性注冊函數，將函數使用權交給組件，將函數的創建權收回Vuex管理。

?當然也可以使用映射函數來實現(比較推薦寫法):

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

完整代碼：

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

（3），Vuex異步操作

對于異步操作Vuex也提供一套解決辦法
?小編先來錯誤示范

直接在函數里面處理異步操作

最后效果：在頁面展示時，數據效果達到，都是在Vuex里面數據沒有變化。

?正確寫法(比較推薦)

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

?當然也可以使用映射函數來實現(比較推薦寫法):

步驟：
①:按需導入mapAtions
②:在methods里面調用函數
...mapAtions(['addresasync'])
③:函數調用：

三，Vuex的Getter使用

1，簡單介紹

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

2，使用步驟:

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

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

?當然也可以使用映射函數來實現(比較推薦寫法):

步驟：
①：按需導入mapGetters函數
②：在計算屬性(computed)里面調用mapGetters函數，傳入數組參數[‘showres’]，然后將函數展開。
寫法：...mapGetters(['showres'])

小編：薇薇的憨寶

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。