Vuex是什么及怎么使用

這篇文章主要講解了“Vuex是什么及怎么使用”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vuex是什么及怎么使用”吧！

創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)服務(wù)商，為中小企業(yè)提供網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)服務(wù)，網(wǎng)站設(shè)計，網(wǎng)站改版維護等一站式綜合服務(wù)型公司，專業(yè)打造企業(yè)形象網(wǎng)站，讓您在眾多競爭對手中脫穎而出創(chuàng)新互聯(lián)公司。

一.Vuex是什么？為什么要用它？

vuex官方解釋

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式 + 庫。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。（學習視頻分享：vue視頻教程）

大家可以思考一下，組件之間的傳值有哪些？有父子通訊，兄弟組件通訊......但是傳參對于多層嵌套就顯得非常繁瑣，代碼維護也會非常麻煩。因此vuex就是把組件共享狀態(tài)抽取出來以一個全局單例模式管理，把共享的數(shù)據(jù)函數(shù)放進vuex中，任何組件都可以進行使用。

二.什么時候我們該使用它？

Vuex 可以幫助我們管理共享狀態(tài)，并附帶了更多的概念和框架。這需要對短期和長期效益進行權(quán)衡。

如果您不打算開發(fā)大型單頁應(yīng)用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應(yīng)用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式就足夠您所需了。但是，如果您需要構(gòu)建一個中大型單頁應(yīng)用，您很可能會考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會成為自然而然的選擇。

三.安裝

方法一：

在腳手架 創(chuàng)建項目時勾選vuex的選項系統(tǒng)會自動創(chuàng)建

方法二：npm  或Yarn安裝

npm install vuex@next --save

yarn add vuex@next --save

四.配置

如果采用腳手架方式進行創(chuàng)建，無需任何操作，可以忽略此步驟

新建store文件->index.js，進行如下配置，在mian.js中進行引入

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

Vue.use(Vuex)

export default new Vuex.Store({
  //數(shù)據(jù)，相當于data
  state: {
    
  },
  getters: {
    
  },
  //里面定義方法，操作state方發(fā)
  mutations: {
    
  },
  // 操作異步操作mutation
  actions: {
    
  },
  modules: {
    
  },
})

main.js中

五.核心概念

vuex中一共有五個狀態(tài) State  Getter  Mutation   Action   Module  下面進行詳細講解

5.1  State

提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)統(tǒng)一放到store的state進行儲存，相似與data

在vuex中state中定義數(shù)據(jù)，可以在任何組件中進行調(diào)用

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

Vue.use(Vuex)

export default new Vuex.Store({
  //數(shù)據(jù)，相當于data
  state: {
    name:"張三",
    age:12,
    count:0
  },
})

調(diào)用：

方法一：

在標簽中直接使用

方法二：

this.$store.state.全局數(shù)據(jù)名稱

方法三：

從vuex中按需導入mapstate函數(shù)

import { mapState } from "vuex";

注意：當前組件需要的全局數(shù)據(jù)，映射為當前組件computed屬性

5.2 Mutation

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的事件類型 (type)和一個回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)：

在vuex中定義：

其中參數(shù)state參數(shù)是必須的，也可以自己傳遞一個參數(shù)，如下代碼，進行計數(shù)器的加減操作，加法操作時可以根據(jù)所傳遞參數(shù)大小進行相加，減法操作沒有傳參每次減一

在組件中使用：

定義兩個按鈕進行加減操作

方法一：

注意：使用commit觸發(fā)Mutation操作

methods:{
//加法
btn(){
this.$store.commit("addcount",10)     //每次加十
}
//減法
btn1(){
this.$store.commit("reduce") 
}
}

方法二：

使用輔助函數(shù)進行操作，具體方法同上

5.3  Action ——進行異步操作

Action和Mutation相似，Mutation 不能進行異步操作，若要進行異步操作，就得使用Action

在vuex中定義：

將上面的減法操作改為異步操作

在組件中使用：

方法一：

直接使用  dispatch觸發(fā)Action函數(shù)

this.$store.dispatch("reduce")

方法二：

使用輔助函數(shù)

5.4 Getter

類似于vue中的computed，進行緩存，對于Store中的數(shù)據(jù)進行加工處理形成新的數(shù)據(jù)

具體操作類似于前幾種，這里不做具體說明

5.5  Modules

當遇見大型項目時，數(shù)據(jù)量大，store就會顯得很臃腫

為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割：

默認情況下，模塊內(nèi)部的 action 和 mutation 仍然是注冊在全局命名空間的——這樣使得多個模塊能夠?qū)ν粋€ action 或 mutation 作出響應(yīng)。

如果希望你的模塊具有更高的封裝度和復用性，你可以通過添加 namespaced: true 的方式使其成為帶命名空間的模塊。當模塊被注冊后，它的所有 getter、action 及 mutation 都會自動根據(jù)模塊注冊的路徑調(diào)整命名。

感謝各位的閱讀，以上就是“Vuex是什么及怎么使用”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對Vuex是什么及怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

網(wǎng)頁題目：Vuex是什么及怎么使用
網(wǎng)站地址：http://bm7419.com/article18/pcgdgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站收錄、品牌網(wǎng)站制作、面包屑導航、定制開發(fā)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)