Vuex細說

来源:https://www.cnblogs.com/xiaotaiyangye/archive/2019/08/20/11385114.html
-Advertisement-
Play Games

vuex 1,什麼是 vuex? vuex 是一個專門為 vue.js 應用程式 開發的狀態管理模式+庫 它充當應用程式中所有組件的集中存儲(數據狀態) ,其規則確保狀態只能以可預測的方式進行變更 並且 組件狀態 和 後臺數據 都是響應的 2,vuex使用方法? - 下載:$ npm i vuex ...


vuex

1,什麼是 vuex?

  vuex 是一個專門為 vue.js 應用程式 開發的狀態管理模式+庫

  它充當應用程式中所有組件的集中存儲(數據狀態) ,其規則確保狀態只能以可預測的方式進行變更

  並且 組件狀態 和 後臺數據 都是響應的

2,vuex使用方法?

  - 下載:$ npm i vuex -S

  - 在 store.js

   + 向 vue 中 寫入 vuex

    

  - 向 vm 實例 註入 store

    

3,vuex 預設的五種基本對象?

  · State    數據倉庫 存放數據的地方(基本數據)

  · Mutation   是所有直接處理 state 的事件方法 提交更改數據的方法(同步)

  · Getter     從基本數據派生的數據

  · Action     和 mutations 一樣 都是存放事件的方法,像一個裝飾器,包裹 mutations (非同步)

  · Module    模塊化 Vuex

4,Mutation 細說?

  

  參數1:是 state

  參數2:payload

  所有直接修改 state 狀態的行為都是通過 mutations

  

  組件中的事件 通過 this.$store.commit(‘mutations中的事件名’)

  # 提交載荷 (payload)

  

  在大多數情況下,載荷應該是一個對象,這樣可以包含多個欄位並且記錄的 mutation 會更易讀:

  

   # 對象風格的提交方式

  

  當使用對象風格的提交方式,整個對象都作為載荷傳給 mutation 函數,因此 handler 保持不變:

  

5,Action 細說?

  首先來註冊一個簡單的 Actions

  

  組件通過 this.$store.dispath(‘actions中的事件名’)

  # 分發 action

  

  # 我們 在 action 內部執行非同步操作

  

  # Actions 支持同樣的載荷方式和對象方式進行分發:

  

 6,Action 和 Mutation 區別?

  

 

  

 


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

-Advertisement-
Play Games
更多相關文章
  • 定場詩 前言 本章為重讀《學習JavaScript數據結構與演算法 第三版》的系列文章,主要講述隊列數據結構、雙端隊列數據結構以及隊列相關應用。 隊列 隊列是遵循 先進先出(FIFO) 原則的一組有序的項。隊列在尾部添加元素,並從頂部移除元素。最新添加的元素必須排在隊列的末尾。現實中常見的隊列就是排隊 ...
  • 1.使用js庫:vue.js , jq , clipboard.js , jsbarcode.js, qrcode.js , mint-ui.js, swiper.js , vconsole.js,babel.js 2. 前端項目流程 1. 使用vue搭建前端框架, 多頁面應用,前端靜態頁面跳轉 2 ...
  • 一、使用 slice() 截取 1,函數說明 slice() 方法可通過指定的開始和結束位置,提取字元串的某個部分,並以新的字元串返回被提取的部分。語法如下: stringObject.slice(start, end) stringObject.slice(start, end) 參數說明: st ...
  • 註意第二種全局變數:在函數內部不聲明直接賦值的變數 ...
  • 利用js對象將iframe數據緩存, 實現子頁面跳轉後, 返回時不丟失之前填寫的數據 實現描述:將數據存放在js對象中, 然後放在父頁面的document對象中, 在頁面刷新的時候將父頁面的值取出來, 然後再賦值 代碼實現 ...
  • 參考資料:js獲取上傳音視頻文件的時長 直接通過element-ui自帶的上傳組件結合js即可,代碼如下: HTML: 得加一個中間欄位,用於保存視頻時長的值,因為在監聽器裡面不能直接使用vue頁面定義的全局變數: js: ...
  • 一、原型模式的概念 原型模式屬於創建型設計模式。當要創建的對象類型由原型實例確定時使用它,該實例被克隆以生成新對象。 此模式用於 1、避免客戶端應用程式中的對象創建者的子類,如工廠方法模式。 2、避免以標準方式創建新對象的固有成本(例如,使用'new'關鍵字),當它對於給定的應用程式來說過於昂貴時。 ...
  • 為什麼要做介面測試 在日常開發過程中,有人做前端開發,有人負責後端開發。介面就是連接前後臺,由於前端開發和後端開發的速度可能不一樣,例如後端開發好了,但是前端沒有開發。那麼我們是不是就不需要測試呢?一般我們大部分人都是做功能測試,很多是界面的功能測試。如果你理解了介面測試,那麼你就可以針對介面進行測 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...