2. 程式人生 > 程式設計 >VueX安裝及使用基礎教程

VueX安裝及使用基礎教程

阿新 • • 發佈：2022-01-23
目錄
  • 1、安裝x依賴包
  • 2、匯入vuex包
  • 3、建立 store 物件
  • 4、將 store 物件掛載到vue例項中
    • (1)、State：
    • (2)、Mutations：
    • (3)、Actions：
    • (4)、Getters：

1、安裝vuex依賴包

npm install vuex --save

2、匯入vuex包

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

3、建立 store 物件

export default new Vuex.Store({
  // state 中存放的就是全域性共享的資料
  state: {
    count: 0
  }
})

4、將 store 物件掛載到vue例項中

new Vue({
  el: '#app',render: h => h(App),router,// 將建立的共享資料物件，掛載到 Vue 例項中
  // 所有的元件，就可以直接用 store 中獲取全域性的資料了
  store
})

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

核心模組：State、Mutations、Actions、Module、Getters

在components目錄下新建Addition.vue檔案：

<template>
<div>
  <h3>當前最新的Count值為：</h3>
  <button>+1</button>
</div>
</template>

Subtraction.vue檔案：

<template>
<div>
  <h3>當前最新的Count值為：</h3>
  <button>-1</button>
</div>
</template>

開啟 App.vue 檔案，引入倆個元件：

<template>
<div>
  <my-addition></my-addition>
  <p>------------------------------</p>
  <my-subtraction></my-subtraction>
</div>
</template>

<script>
import Addition from './components/Addition'
import Subtraction from './component
 
s/Subtraction'
export default {
  components: {
    'my-addition': Addition,'my-subtraction': Subtraction
  },data () {
    return {}
  }
}
</script>

(1)、State：

State 提供唯一的公告資料來源，所有共享的資料都要統一放到 Store 的 State 中進行儲存。我們需要儲存的資料就儲存在這裡，可以在頁面通過 this.$store.state來獲取我們定義的資料。

// 建立store資料來源，提供唯一公共資料
const store = new Vuex.Store({
   state: {
      count: 0
   }
})

元件訪問 Store 中資料的第一種方式：

this.$store.state.全域性資料名稱

元件訪問 Store 中資料的第二種方式：

// 1.從 vuex 中按需匯入 mapState 函式
import { mapState } from 'vuex'

通過剛才匯入的 mapState 函式，將當前元件需要的全域性資料，對映為當前元件的 computed 計算屬性：

// 2.將全域性資料，對映為當前元件的計算屬性
computed: {
    ...mapState(['count'])
}

開啟store/index.js檔案，定義 count：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },mutations: {
  },actions: {
  },modules: {
  }
})

回到Addition.vue檔案中，用第一種方式：

<template>
<div>
  <h3>當前最新的Count值為：{{$store.state.count}}</h3>
  <button @click="handleAdd">+1</button>
</div>
</template>

回到 Subtraction.vue檔案中，用第二種方式：

<template>
<div>
  <h3>當前最新的Count值為：{{count}}</h3>
  <button>-1</button>
</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  http://www.cppcns.com},// 計算屬性
  computed: {
    ...mapState(['count']) // 用...展開運算子把Count展開在資源屬性裡
  }
}
</script>

此時效果圖：

VueX安裝及使用基礎教程

(2)、Mutations：

Mutations 用於變更 Store 中的資料。只有 mutation裡的函式才有權利去修改state中的資料。mutation非常類似於事件：每個 mutation 都有一個字串的事件型別 (type)和 一個回撥函式 (handler)。但是，mutation只允許同步函式，不能寫非同步的程式碼。

  • ①只能通過 mutation 變更 Store 資料，不可以直接操作 Store 中的資料。
  • ②通過這種方式雖然操作起來稍微繁瑣一些，但是可以集中監控所有資料的變化。

定義：

// 定義 Mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },mutations: {
    add (stEuLYPSrZKate) {
      // 變更狀態
      state.count++
    }
  }
})

第一種觸發方式：

// 觸發 mutation
methods: {
    handleAdd () {
      // 觸發 mutations 的第一種方式
      this.$store.commit('add')
    }
}

開啟store/index.js檔案，定義mutations ：

mutations: {
    add (state) {
      state.count++
    }
}

回到 Addition.vue檔案中觸發：

<template>
<div>
  <h3>EuLYPSrZK;當前最新的Count值為：{{$store.state.count}}</h3>
  <button @click="handleAdd">+1</button>
</div>
</template>

<script>
export default {
  methods: {
    handleAdd () {
      this.$store.commit('add')
    }
  }
}
</script>

此時點選+1按鈕，就可以看到數值變為1。

還可以在觸發 mutations 時傳遞引數：

// 定義 Mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },mutations: {
    addN (state,step) {
      // 變更狀態
      state.count += step
    }
  }
})

第一種觸發方式：

// 觸發 mutation
methods: {
    handleAdd () {
      this.$store.commit('addN',3)
    }
}

開啟store/index.js檔案，增加一個addN：

mutations: {
    add (state) {
      state.count++
    },addN (state,step) {
      state.count += step
    }
}

回到 Addition.vue檔案中，增加一個+N的按鈕並增加點選事件：

<template>
<div>
  <h3>當前最新的Count值為：{{$store.state.count}}</h3>
  <button @click="handleAdd">+1</button>
  <button @click="handleAdd2">+N</button>
</div>
</template>

<script>
export default {
  data () {
    return {
      num: 2
    }
  },methods: {
    handleAdd () {
      this.$store.commit('add')
    },handleAdd2 () {
      // commit 的作用，就是呼叫某個 mutation 函式
      this.$store.commit('addN',this.num)
    }
  }
}
</script>

此時點選+N按鈕就會每次增加2。

觸發 mutations 的第二種方式：

// 1.從 vuex 中按需匯入 mapMutations 函式
import { mapMutations } from 'vuex'

通過剛才匯入的 mapMutations 函式，將需要的 mutations 函式，對映為當前元件的 methods 方法：

// 2.將指定的 mutations 函式，對映為當前元件的methods 函式：
methods: {
   ...mapMutations({'add','addN'})
}

開啟store/index.js檔案，在mutations增加一個sub：

mutations: {
    add (state) {
      state.count++
    },step) {
      state.count += step
    },sub (state) {
      state.count--
    }
},

回到 Subtraction.vue檔案中，給-1按鈕增加點選事件：

<template>
<div>
  <h3>當前最新的Count值為：{{count}}</h3>
  <button @click="handleSub">-1</button>
</div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
  data () {
    return {}
  },// 計算屬性
  computed: {
    ...mapState(['count']) // 用...展開運算子把Count展開在資源屬性裡
  },methods: {
    ...mapMutations(['sub']),handleSub () {
      this.sub()
    }
  }
}
</script>

這時重新整理頁面，點選-1按鈕就會每次-1了。

開啟store/index.js檔案，增加一個subN：

mutations: {
    add (state) {
      state.count++
    },step) http://www.cppcns.com{
      state.count += step
    },sub (state) {
      state.count--
    },subN (state,step) {
      state.count -= step
    }
},

回到Subtraction.vue檔案中，在增加一個-N的按鈕，並新增點選事件：

<button @click="handleSub2">-N</button>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['sub','subN']),handleSub () {
      this.sub()
    },handleSub2 () {
      this.subN(2)
    }
  }
}
</script>

這時點選-N按鈕，每次就-2了。

下面有個需求，就是在點選+1按鈕後延遲1秒在顯示變化後的數值。

注意：不要在mutations函式中，執行非同步操作。所以就需要用到了Action用於處理非同步任務。

(3)、Actions：

Action 用於處理非同步任務。

如果通過非同步操作變更資料，必須通過 Action，但是在 Action 中還是要通過觸發 Mutation 的方式間接變更資料。

定義：

// 定義 Action
const store = new Vuex.Store({
  // ...省略其他程式碼
  mutations: {
    add (state) {
      state.count++
    }
  },actions: {
    addAsync (context) {
      setTimeout(() => {
        context.commit('add')
      },1000)
    }
  }
})

第一種方式觸發：

// 觸發 Action
methods: {
  handleAdd () {
      // 觸發 actions 的第一種方式
      this.$store.dispatch('addAsync')
  }
}

開啟store/index.js檔案，增加一個 addAsync：

actions: {
    addAsync (context) {
      setTimeout(() => {
        // 在 actions 中，不能直接修改 state 中的資料
        // 必須通過 context.commit() 觸發某個 mutations 的函式才行
        context.commit('add')
      },1000)
    }
}

回到 Addition.vue檔案中，增加一個+1 Async的按鈕並增加點選事件：

<button @click="handleAdd3">+1 Async</button>

<script>
export default {
  methods: {
    handleAdd () {
      this.$store.commit('add')
    },this.num)
    },handleAdd3 () {
      this.$store.dispatch('addAsync')
    }
  }
}
</script>

這時點選+1 Async按鈕，可以實現延遲1秒後+1的功能了。

觸發 actions 非同步任務時攜帶引數：

定義：

// 定義 Action
const store = new Vuex.Store({
  // ...省略其他程式碼
  mutations: {
    addN (state,},actions: {
    addNAsync (context,step) {
      setTimeout(() => {
        context.commit('addN',step)
      },1000)
    }
  }
})

觸發：

// 觸發 Action
methods: {
  handleAdd () {
      // 在呼叫 dispatch 函式，觸發 actions 時攜帶引數
      this.$store.dispatch('addNAsync',5)
  }
}

開啟store/index.js檔案，增加一個 addNAsync：

actions: {
    addAsync (context) {
      setTimeout(() => {
        // 在 actions 中，不能直接修改 state 中的資料
        // 必須通過 context.commit() 觸發某個 mutations 的函式才行
        context.commit('add')
      },1000)
    },addNAsync (context,1000)
    }
}

回到 Addition.vue檔案中，增加一個+N Async的按鈕並增加點選事件：

<button @click="handleAdd4">+N Async</button>

<script>
export default {
  methods: {
    handleAdd4 () {
      // 在呼叫 dispatch 函式，觸發 actions 時攜帶引數
      this.$store.dispatch('addNAsync',5)
    }
  }
}
</script>

這時點選+NAsync按鈕，可以實現延遲1秒後+5的功能。

觸發 actions 的第二種方式：

// 1.從 vuex 中按需匯入 mapActions 函式
import { mapActions } from 'vuex'

通過剛才匯入的 mapActions 函式，將需要的 actions 函式，對映為當前元件的 methods 方法：

// 2.將指定的 actions 函式，對映為當前元件的 methods 函式
methods: {
  ...mapActions(['addAsync','addNAsync'])
}

開啟store/index.js檔案，在actions 增加一個subAsync：

actions: {
    addAsync (context) {
      setTimeout(() => {
        // 在 actions 中，不能直接修改 state 中的資料
        // 必須通過 context.commit() 觸發某個 mutations 的函式才行
        context.commit('add')
      },subAsync (context) {
      setTimeout(() => {
        context.commit('sub')
      },1000)
    }
}

回到Subtraction.vue檔案中，在增加一個-1 Async的按鈕，並新增點選事件：

<button @click="handleSub3">-1 Async</button>

<script>
import { mapState,mapMutations,mapActions } from 'vuex'
export default {
  methods: {
    ...mapMutations(['sub',...mapActions(['subAsync']),handleSub2 () {
      this.subN(2)
    },handleSub3 () {
      this.subAsync()
    }
  }
}
</script>

還有個更簡單的方式：

<button @click="subAsync">-1 Async</button>

<script>
import { mapState,mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(['subAsync'])
  }
}
</script>

這樣實現的效果是一樣的。

下面用同樣的思路來實現-N的非同步操作：

開啟store/index.js檔案，增加一個subNAsync：

actions: {
    subNAsync (context,step) {
      setTimeout(() => {
        context.commit('subN',1000)
    }
}

回到Subtraction.vue檔案中，在增加一個-N Async的按鈕：

<button @click="subNAsync(3)">-N Async</button>

<script>
import { mapState,mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(['subAsync','subNAsync'])
  }
}
</script>

這時點選-NAsync按鈕，可以實現延遲1秒後-3的功能。

(4)、Getters：

Getter 用於對 Store 中的資料進行加工處理形成新的資料。不會修改 state 裡的源資料，只起到一個包裝器的作用，將 state 裡的資料變一種形式然後返回出來。
① Getter 可以對 Store 中已有的資料加工處理之後形成新的資料，類似Vue的計算屬性。
② Store 中資料發生變化，Getter 包裝出來的資料也會跟著變化。

定義：

// 定義 Getter
const store = new Vuex.Store({
  state: {
    count: 0
  },getters: {
    showNum: state => {
      return '當前最新的數量是【'+ state.count +'】'
    }
  }
})

使用 getters 的第一種方式：

this.$store.getters.名稱

我們可以把文字的內容刪除掉，然後用 getters來替換：

開啟store/index.js檔案，定義getters：

getters: {
    showNum (state) {
      return '當前最新的數量是【' + state.count + '】'
    }
}

回到 Addition.vue檔案修改：

<h3>{{$store.getters.showNum}}</h3>

此時重新整理頁面，已經變為了getters中的內容，效果圖：

VueX安裝及使用基礎教程

使用 getters 的第二種方式：

import { mapGetters } from 'vuex'

computed: {
  ...mapGetters(['showNum'])
}

開啟 Subtraction.vue檔案修改：

<h3>{{showNum}}</h3>

<script>
import { mapState,mapActions,mapGetters } from 'vuex'
export default {
  // 計算屬性
  computed: {
    ...mapState(['count']),// 用...展開運算子把Count展開在資源屬性裡
    ...mapGetters(['showNum'])
  }
}
</script>

效果圖：

VueX安裝及使用基礎教程

到此這篇關於VueX安裝及使用基礎教程的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

VueX安裝及使用基礎教程

目錄1、安裝x依賴包2、匯入vuex包3、建立 store 物件4、將 store 物件掛載到vue例項中(1)、State：(2)、Mutations：(3)、Actions：(4)、Getters：1、安裝vuex依賴包

mysql5.7安裝及配置教程

本文為大家分享了mysql安裝配置教程，供大家參考，具體內容如下 一、配置MySQL資料庫

PyCharm第一次安裝及使用教程

pycharm簡介 PyCharm是一種Python IDE，帶有一整套可以幫助使用者在使用Python語言開發時提高其效率的工具，比如除錯、語法高亮、Project管理、程式碼跳轉、智慧提示、自動完成、單元測試、版本控制。此外，該IDE提供

Python requests模組安裝及使用教程圖解

requests模組是一個用於訪問網路的模組，其實類似的模組還有很多，不在一一在這裡解釋。這麼多的相似的模組為什麼都說只有這個好用呢，因為他人性化。如果你學過urllib之類的模組的話，比如urllib，對比一下就很清楚

ActiveMQ安裝及部署教程圖解

ActiveMQ是Apache的一個開源專案，它是一個功能強勁的開源訊息匯流排，也是一箇中間件產品，它是JMS的一個實現。

Anaconda的安裝及使用教程

1、Anaconda的介紹 Anaconda指的是一個開源的Python發行版本，其包含了conda、Python等180多個科學包及其依賴項。因為包含了大量的科學包，Anaconda的下載檔案比較大（約531 MB），如果只需要某些包，或者需要節省頻

微軟辦公軟體-office的下載安裝及啟用教程

藍色字型都是超連結，點選就可以獲取相關軟體或者進入相關網站 寫這篇文章的原因呢是因為有個朋友多次找我弄一個辦公室的試用期到的問題，

Anaconda詳細安裝及使用教程（帶圖文）

Anacond的介紹 Anaconda指的是一個開源的Python發行版本，其包含了conda、Python等180多個科學包及其依賴項。因為包含了大量的科學包，Anaconda的下載檔案比較大（約531 MB），如果只需要某些包，或者需要節省頻寬或

GIS Experience （一）：GeoServer安裝及使用教程

目錄1 前言2 軟體下載及安裝2.1 安裝器部署安裝2.2 綠色硬碟免安裝3 啟用軟體4 部署釋出地圖資料4.1 新建工作區4.2 新建資料儲存4.2.1 shapefile4.2.2 PostGIS4.3 新建圖層4.4 釋出圖層5 問題解決

Git安裝及基礎命令使用

一、版本控制系統 1.什麼是版本控制系統 記錄一個或多個變化的過程，以便隨時會到某個時間點

從零開始用DataGrip的安裝及使用教程

mysql的安裝 官網下載mysql-8.0.19-winx64 這裡隨便下載一個版本就行了（群裡下也行）

Navicat Premium15安裝及破解教程

Navicate Premium安裝及破解教程 Nacivat安裝 百度搜索Navicate或者直接進入 選擇產品 選擇免費試用

蘿蔔視訊APP後端原始碼安裝及搭建教程，後端配置最全圖文說明視訊操作教程_多啦咪

蘿蔔app後端視訊搭建操作教程及後臺配置操作圖文說明 1.不會操作的安裝下面方法小白也能變成大神，關注公眾號獲取更多免費解鎖技巧！【微信公眾號：多啦咪】

nero burning rom 2021綠色版安裝及使用教程

nero burning rom 2021是一款功能強大的燒錄軟體，簡稱為nero2021，一直都是排名第一的燒錄軟體，它擁有最成熟的燒錄技術，可以將資料、視訊、照片燒錄和複製到CD、DVD、Blu-ray光碟中，還支援視訊光碟、音

Jmeter壓力測試工具安裝及使用教程

1.開啟官網：https://jmeter.apache.org/2.選擇進行下載，下載下來為一個壓縮包，解壓即可。3.解壓找到安裝目錄下 bin/jmeter.bat以管理員身份啟動即可在測試計劃中新建執行緒組右鍵執行緒組，選擇sampler,

SQL Serve 2017 下載安裝及開啟教程

SQL Serve 2017 下載安裝教程 SQL Server 是Microsoft 公司推出的關係型資料庫管理系統。具有使用方便可伸縮性好與相關軟體整合程度高等優點，可跨越從執行Microsoft Windows 98 的膝上型電腦到執行Microso

Goland 的安裝及啟用教程(window、linux下安裝)

前言 前面我們已經將GO的環境安裝好了，那麼是否可以進行開發了呢？ 可以，但是為了能夠更高效率的開發，我們還需要下載一個軟體，該軟體的作用就是方便我們能夠快速的編寫GO指令，快速的執行我們編寫好的GO指令。

Navicat Premium15安裝及破解教程詳解親測有效(附破解失敗解決方案)

Navicate Premium安裝及破解教程 Nacivat安裝 百度搜索Navicate或者直接進入 參考教程：

超詳細MySQL8.0.22安裝及配置教程

大家好，今天我們來學習一下 MySQL8.0.22安裝及配置，好好看，好好學，超詳細的

Anaconda介紹、安裝及使用教程

〇、序 Python是一種面向物件的解釋型計算機程式設計語言，其使用，具有跨平臺的特點，可以在Linux、macOS以及Windows系統中搭建環境並使用，其編寫的程式碼在不同平臺上執行時，幾乎不需要做較大的改動，使用者無