vue學習指南:第十五篇(詳細) - Vuex

来源:https://www.cnblogs.com/jinfeixiang/archive/2020/01/10/12175502.html
-Advertisement-
Play Games

Vuex 一、基礎 1. Vuex 相當於 vue的數據倉庫 2. Vuex 是 vue 的狀態管理工具 3. Vuex中的 state 只能通過mutations 改變 4. Vuex很適合做購物車 什麼是Vuex? Vuex採用集中式存儲所有組件的數據狀態,並且中間狀態和store(後臺數據)是 ...


Vuex

一、基礎

  1. Vuex 相當於 vue的數據倉庫

  2. Vuex 是 vue 的狀態管理工具

  3. Vuex中的 state 只能通過mutations 改變

  4. Vuex很適合做購物車

什麼是Vuex?

  Vuex採用集中式存儲所有組件的數據狀態,並且中間狀態和store(後臺數據)是響應的。

什麼是響應?

  前臺的組件數據發生改變了,那後臺的store數據都會發生改變,從而導致根這個組件有關聯的都會改變,所以很適合做購物車。

Vuex有什麼好處?及使用場景?

  好處:可以做狀態管理 採用LocalStorage保存信息,數據便一直存儲在用戶的客戶端中。

  使用場景:適合在巨大複雜的項目中使用。

Vuex有什麼優勢?

  1. Vuex的狀態存儲是響應式的

  2. 它是所有組件的狀態集合

Vuex的核心及其作用

  核心概念:state,getters,mutation,action,module

  作用:組件之間的數據通信,使用單向數據流的方式進行數據的中心化管理

詳述Vuex的運行機制

  Vuex的狀態存儲是響應式的,當Vuex組件從store中讀取時,若 store狀態發生改變,響應的組件也會更新狀態,但是直接改變 state,必須通過顯示的提交(commit)mutaions來追蹤每個狀態的變化。

二、Vuex的流程圖:

  1. 每個點都是必須的,不執行那個可以省略,但必須按照流程圖走。

Vuex的工作流程:

  在vue組件中,通過 dispatch來觸發actions提交修改的數據操作,然後通過actions的commit來觸發mutations來修改數據,mutations接受到commit的請求,就會自動通過mutate來修改state裡面的數據最後由store觸發每一個調用它的組件的更新。

  

 

 

 

Vuex的四種狀態:

  1. state:就是數據倉庫,也是我們倉庫存放數據的地方

  我們組件如果想修改數據,正確的操作流程是:

  2.  查看是同步還是非同步,是同步則跳過actions,直接從mutations中修改state的數據,這樣state倉庫的數據修改了之後,我們才能正確的響應到組件上,所以組件僅僅把事件提交給mutationd就好了,讓Vuex的mutations的方法執行。

二、Vuex的使用

下載:

  npm i vuex --save

1. 下載之後 在 main.js 引入 Vuex,我們把Vuex封裝在 store.js 裡面所有main里引的是 store,優化了main。

2. 創建好腳手架後,在src目錄下 創建一個 store文件夾,與components同級,在裡面創建一個store.js裡面這樣寫。store裡面的每個文件夾寫對應的js,然後都引入到store中,註入到store倉庫中。

 

 

3. 向vm實例下註入store

  1. 將創建的store.js 引入到main.js中

  

  在main文件夾下

  向vm實例註入store,store是創建倉庫存放數據的,讓store(倉庫)成為vm的一個屬性

  

 

 

 記住這兩句話

1. vuex 中的 state 都是響應的

2. vuex中的 state 只能通過 mutation 改變

store裡面存放的是什麼?

store是創建倉庫存放數據的,讓store(倉庫)成為vm的一個屬性,它是存放Vuex

三、Vuex的五大核心

第一個、state

1. state:state是Vuex的狀態,就是存放數據的地方

2. state屬性裡面有一個count的屬性

3. 唯一修改 state狀態的是 mutations

1. 在state文件中

  

 

 

2. 在組件中通過 {{ this.$store.state.count }} 來獲取

  

 

 

第二個、mutations

1. mutations 是處理state的所有事件方法

2. 所有直接修改state的行為都是通過mutations

3. 在store中的mutations.js 中:mutations是不對外暴露的,外界無法看的

  

 

 

2. 在組件中的 home中

  1. 組件中的事件,通過this.$store.commit("mutations 中的事件名")

  

 

 

3. 通過綁定事件進行修改

  

 

 

第二中寫法載荷

  1. 第一個參數 是 state 存放所有事件方法的參數

  2. 第二個參數 payload 載荷,載荷是傳輸額外的參數,載荷其實是個對象 可以是字元串 number object

  

 

   

  1. 在 home 組件裡面

  

  

 

 

第三個、actions

  1. actions和mutations 是一樣的,都是存放事件方法,actions裡面存放的是非同步方法(定時器)

  2. 組件通過 this.$store.dispatch("")

  3. commit 直接提交給 modules

  4. dispatch提交給actions

  5. dispatch提交給actions

  6. actions 如果我們涉及到非同步的提交數據,那就只能從actions開始,到mutations然後才能修改state中的數據,最後渲染到vue組件上。

  7. 如果我們不這樣操作,雖然我們的數據因響應式的也可以正常渲染頁面,但是我們的Vuex的倉庫state,卻不能正常的顯示。

操作步驟:

  1. vue組件上,我們提交的方式

  

 

 

  2. 對我們Vuex的實例建立一個倉庫,放一個數據

  

 

 

  3. 組件將方法提供給 actions,actions觸發行為提交給 mutations,mutations直接去改

  4. 組件將這個行為通過dispatch委托給actions,actions在通過commit委托給mutations的function

    

 

 

第四個、getters

1. getter和computed計算屬性一樣的

2. computed計算屬性 只是各個組件自己的

3. computed 計算屬性

4. getters只針對state

操作步驟

  1. 通過 $store.getters,fnarr是getters返回的處理後的數據

  

 

 

  2. 把處理後的數據返回給fnarr函數

  

 

 

第五個、module

  思想:就是將我們寫在一起的東西,分開,比如 state倉庫的數據,我們可以使用es6的模塊化開發,來引入別的模塊的數據,先達到文件分離的目的。

  我們還可以使用 module對象,來使我們的倉庫分離,只是state倉庫中的數據不一樣,但別的東西都一樣。

  操作步驟:

  1. 在home組件中寫

  

 

   

  2. Vuex的寫法

  

 

 

 

作者:晉飛翔
手機號(微信同步):17812718961
希望本篇文章 能給正在學習 前端的朋友 或 以及工作的朋友 帶來收穫 不喜勿噴 如有建議 多多提議 謝謝!!!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言 自己也只是一個前端的小白,因為公司大佬都比較忙,面試這種事就落到了我這小白身上,第一次叫我去的時候我是百般拒絕的,因為自己還是有自知之明的,但是別人實在抽不開身,沒辦法只能去了,他們開玩笑說就按你這水平來就行了,啥時候你問不住了就讓他來複試就行。前前後後也面了一些人,加上自己面試時候整理的一些 ...
  • 在日常的開發工作中,表單開發是較為繁瑣且重覆的。本文介紹一個我自己寫的,提高開發效率的小工具。 1 可視化設計器 設計器基於Element UI ,可通過點擊或拖拽的方式設計基本表單, 設計器生成的代碼可直接運行在基於 Element 的 vue 項目中。 github倉庫 https://gith ...
  • padding與元素尺寸 css中預設的box-sizing是content-box,所以使用padding在定寬元素中會增加元素尺寸。可以使用box-sizing:border-box或者採用無寬度以及寬度分離原則(推薦使用)。 當使用box-sizing:border-box在某些情況下還是會改 ...
  • function getCoords(evt) { // 計算出當前屏幕與svg的比例 var canvas = document.getElementById("canvase"); var viewbox = svgRoot.getAttributeNS(null, "viewBox"); // ...
  • 1. vue中路由模式的種類有兩種 1. 一種是 hash 模式。 2. 一種是 h5 的 history 模式。 2. hash 和 history 都是來自 bom 對象 bom 來自 window 3. window.location.hash 4. hash 是屬於 window.locat ...
  • 5)構造函數的用法:例 3.5.1<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/></head><script> function Student(name, age) { /* 馬克-to-win ...
  • 模塊: 封裝好的應用程式,它只是js文件的封裝。 組件: 一個完整的單位個體,可以有js可以有css和html。 作者:晉飛翔手機號(微信同步):17812718961希望本篇文章 能給正在學習 前端的朋友 或 以及工作的朋友 帶來收穫 不喜勿噴 如有建議 多多提議 謝謝!!! ...
  • 一、vue組件中的data為什麼是函數 為了保證組件的獨立性 和 可 復用性,data 是一個函數,組件實例化的時候這個函數將會被調用,返回一個對象,電腦會給這個對象分配一個記憶體地址,你實例化幾次,就分配幾個記憶體地址,他們的地址都不一樣,所以每個組件中的數據不會相互干擾,改變其中一個組件的狀態,其 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...