個人筆記-vuex

個人筆記-vuex

最近想要沉淀下自己的知識體系，以前光看不記，當時記得，過段時間記憶就模糊了，好腦子不如爛筆頭，古人誠不欺我，所以現在決定給用自己的語言方式來給自己記個筆記。

vuex

vuex 有什么好講的呢，現在的組件通訊有太多方法了，但這種作為vue全家桶里的一員，使用還是蠻廣泛的，關于這方面的資料也很多，但我這個筆記是以自己的理解方式用大白話來講的，有不對的還講指正。(文章里的代碼摘自vuex的中文官網vuex.vuejs.org/zh/)

為什么要用vuex

我們知道，vue是基于組件化的，各管各的，如果這個時候，兄弟組件之間的需要共用某個數據，該怎么通訊呢，方法有很多，比如父子級別的可以通過props和$emit來解決，爺孫級別的可以通過$attrs和$listeners來解決，如果各自相互獨立的組件還可能通過中央總線事件來通訊，基本上這三種算是常見的了，當然，也有人說，可以做個全局的變量，然后大家都去拿，在大型項目開發中，這個變量你存了某個值，然后又被另一個人改了，你根本不知道是找哪個人哪行代碼改了，這個時候就需要我們進行一個約定，一個特定的地方，保存我們共同的東西，通過約定的方法去更改，以便我們能定位到是誰改了，傳了什么東西進來，又方便我們進行追蹤。vuex還有一個好處，他里面存的是當前的狀態，這就意味著，這里的發生了變化，能響應到對應的組件調用處。

共同的地方-Store

“store”基本上就是一個容器，它包含著你的應用中大部分的狀態 (state)。

Vue.use(Vuex) // 重點
const store = new Vuex.Store({state: {count: 0}
})
復制代碼

store實例里一定包含一個state對象，里就會存放所有的共有數據狀態。

那么組件里面我要去取到這個狀態該怎么做呢，首先要注入

const app = new Vue({el: '#app',// 把 store 對象提供給 “store” 選項，這可以把 store 的實例注入所有的子組件store,components: { Counter },template: `<div class="app"><counter></counter></div>`
})
復制代碼

在根組件里注入，這樣所屬組件就能通過this.$store.state訪問到store實例里的state對象了，其實這種方法在vue里很常見，包括路由啊之類的，都是通過在根組件注入，所屬組件調用api的方式來取值的。

Getter

Getter有什么用呢？之前我們不是可以直接通過this.$store.state訪問到實例里的state對象了嗎，那還要這個有什么用呢，在我看來，Getter有三個作用

  • 可以對this.$store.state里的某個屬性做計算，比如排序啊，過濾之類的
  • 可以直接通過方法訪問，對state里的數據進行篩選，比如store.getters.fun(id)
  • 進行映射，這就要用到mapGetters這個輔助函數：

mapGetters

import { mapGetters } from 'vuex'export default {// ...computed: {// 使用對象展開運算符將 getter 混入 computed 對象中...mapGetters(['doneTodosCount','anotherGetter',// ...])}
}
復制代碼

這樣寫有什么好處呢，這其實是一個映射，可能不同的理解解釋的不一樣，大家也不用糾結，這樣寫了之后可以通過this.doneTodosCount直接拿到，相當于把this.$store.state.doneTodosCount映射成了this.doneTodosCount，這樣大家就再也不用噼里啪啦寫一堆重復的東西了。

Mutation

之前我們提到，我們要約定一個方法去更新state里數據的狀態，這個約定的方法就是提交 mutation。

const store = new Vuex.Store({...mutations: {increment (state) {// 變更狀態state.count++}}
})
復制代碼

每一個mutation都類似一個事件，increment就是這個事件的type,你不能直接調用這個事件的回調，需要以相應的 type 調用 store.commit 方法：store.commit('increment')

有時候我們要需要對傳入的數據進加以第三方數據進行運算，文檔里叫提交載荷

// ...
mutations: {increment (state, n) {state.count += n}
}
復制代碼

調用store.commit('increment', 10)

文檔里說載荷應該是一個對象，在大多數情況下，載荷應該是一個對象，這樣可以包含多個字段并且記錄的 mutation 會更易讀，這塊表示也蒙。。。

// ...
mutations: {increment (state, payload) {state.count += payload.amount}
}
復制代碼

還有一種對象提交模式，我覺得沒啥用，跳過。

mapMutations

同mapGetter,也是映射成this.的寫法

import { mapMutations } from 'vuex'export default {// ...methods: {...mapMutations(['increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`// `mapMutations` 也支持載荷：'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`]),...mapMutations({add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`})}
}
復制代碼

使用常量替代 Mutation 事件類型

這個看項目吧，大型項目可能需要，各種規范。

敲個黑板： mutation 都是同步事務，什么是同步事務呢，簡單的來說就是狀態變更都應該在此刻完成，不能有異步的操作，需要加入異步的操作見后面的Action知識點。

Action

Action 類似于 mutation，不同在于：Action 提交的是 mutation，而不是直接變更狀態。Action 可以包含任意異步操作。

const store = new Vuex.Store({...mutations: {increment (state) {state.count++}},actions: {/* es6解構寫法increment ({ commit }) {commit('increment')}*/increment (context) {context.commit('increment')}}
})
復制代碼

這個context是個什么東西呢，文檔上面是這么說的：與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。

Action 通過 store.dispatch 方法觸發：store.dispatch('increment'),同時Action里支持異步操作，舉個簡單的例子

actions: {incrementAsync ({ commit }) {setTimeout(() => {commit('increment')}, 1000)}
}
復制代碼

action里的寫法基本上和mutationu差不多

// 以載荷形式分發
store.dispatch('incrementAsync', {amount: 10
})// 以對象形式分發
store.dispatch({type: 'incrementAsync',amount: 10
})
復制代碼

mapActions

功能同之前的類似

組合 Action

組合Action，我個人用的不多，但原理要了解一下，Action支持異步，所以在Action里可以寫異步的commit，包括Promise，包括多個commit依賴性的先后觸發。

Module

大型項目多人會用到的東西，各自管各自的模塊。每個模塊都有自己對應的一套完整的store,然后再通過modules組合到頂層的store里去。

const moduleA = {state: { ... },mutations: { ... },actions: { ... },getters: { ... }
}const moduleB = {state: { ... },mutations: { ... },actions: { ... }
}const store = new Vuex.Store({modules: {a: moduleA,b: moduleB}
})store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態
復制代碼

對于module，我覺得只需關注幾個點就可了：

模塊內部的 mutation 和 getter，接收的第一個參數是模塊的局部狀態對象，而不是頂層的了。

const moduleA = {state: { count: 0 },mutations: {increment (state) {// 這里的 `state` 對象是模塊的局部狀態state.count++}},actions: {incrementIfOddOnRootSum ({ state, commit, rootState }) {if ((state.count + rootState.count) % 2 === 1) {commit('increment')}}},getters: {sumWithRootCount (state, getters, rootState) {return state.count + rootState.count}}
}
復制代碼

關于這塊，我覺得只需關注幾個點就Ok了。

現在的state都指局部的狀態對象了，頂級的狀態為rootState

const moduleA = {// ...getters: {sumWithRootCount (state, getters, rootState) {return state.count + rootState.count}},actions: {incrementIfOddOnRootSum ({ state, commit, rootState }) {if ((state.count + rootState.count) % 2 === 1) {commit('increment')}}}
}
復制代碼

參數和非module一樣，只不過多了第三個參數，這個參數指向頂級狀態對象。

命名空間

默認情況下，模塊內部的action ,mutation，getter是注冊在全局命名空間的–這樣使得多個模塊能夠對同一mutation或者action做出響應；如果希望你的模塊更加自包含或者提高可重用性，你可以通過添加namespaced:true 的方式使其成為命名空間模塊，當模塊被注冊后，他的所有getter,action，mutation都會自動根據模塊注冊的路徑調整命名；x

轉載于:https://juejin.im/post/5c85cff4f265da2dde0723f2

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/252037.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/252037.shtml
英文地址，請注明出處：http://en.pswp.cn/news/252037.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

常用模塊之hashlib,configparser,logging模塊

常用模塊之hashlib,configparser,logging模塊

常用模塊二 hashlib模塊 hashlib提供了常見的摘要算法&#xff0c;如md5和sha1等等。 那么什么是摘要算法呢?摘要算法又稱為哈希算法、散列算法。它通過一個函數&#xff0c;把任意長度的數據轉換為一個長度固定的數據串&#xff08;通常用16進制的字符串表示&#xff09;。 注…
閱讀更多...
iPhone屏幕各種尺寸分辨率（更新至XS）

iPhone屏幕各種尺寸分辨率（更新至XS）

iPhone屏幕各種尺寸分辨率&#xff08;更新至XS&#xff09; DeviceLogic PointLogic PixelSizeScaleiPhone 2G480 320480 3203.51xiPhone 3480 320480 3203.51xiPhone 3GS480 320480 3203.51xiPhone 4480 320960 6403.52xiPhone 4S480 320960 6403.52xiPhone 5568 …
閱讀更多...
浙江嘉興徒步游

浙江嘉興徒步游

最近參加了一個徒步團&#xff0c;趁著周末時光&#xff0c;來了一場徒步旅游&#xff0c;不一樣的體驗圖片發自簡書App一開始進山探秘外蒲島的路程&#xff0c;荒草叢生圖片發自簡書App樹木郁郁蔥蔥&#xff0c;藍天白云&#xff0c;一切都很沒好圖片發自簡書App漫山遍野都開滿…
閱讀更多...
ASP.NET Web API 2 過濾器

ASP.NET Web API 2 過濾器

前言 我們知道 ASP.NET Web API 過濾器&#xff0c;也是屬于消息處理機制中的一部分。正因如此&#xff0c;我們經常使用它來完成對請求的授權驗證、參數驗證&#xff0c;以及請求的 Log 記錄&#xff0c;程序異常捕獲等。 1. 常用的四大過濾器 ASP.NET Web API 2 中的所有…
閱讀更多...
java的ThreadLocal類的使用方法

java的ThreadLocal類的使用方法

java的ThreadLocal類的使用方法&#xff0c;ThreadLocal是一個支持泛型的類&#xff0c;用在多線程中用于防止并發沖突問題。比如以下的一個樣例&#xff0c;就是用于線程添加1&#xff0c;可是相互不沖突 package com.test.threadlocal;import java.util.concurrent.ExecutorS…
閱讀更多...
為選擇合適的ERP供應商，是否該發布需求建議書（RFP）？

為選擇合適的ERP供應商，是否該發布需求建議書（RFP）？

全球有成百上千家企業資源規劃 (ERP) 解決方案供應商。在開展挑選 ERP 供應商的項目時&#xff0c;不可能與所有這些供應商都進行接觸。不斷縮小這一領域供應商的范圍&#xff0c;直到最終敲定最適合的入圍名單&#xff08;通常被稱為“最終候選人名單”&#xff09;是項目成功…
閱讀更多...
kettle插入更新流程

kettle插入更新流程

kettle轉換步驟工作組件 這里有四個類構成了這個kettle 步驟/節點&#xff0c;每一個類都有其特定的目的及所扮演的角色。 TemplateStep: 步驟類實現了StepInteface接口&#xff0c;在轉換運行時&#xff0c;它的實例將是數據實際處理的位置。每一個執行線程都表示一個此類的實…
閱讀更多...
打開mobilenet——ssd的demo.py顯示這樣的錯誤解決方法：Intel MKL FATAL ERROR: Cannot load libmkl_avx.so or libmkl_def.s

打開mobilenet——ssd的demo.py顯示這樣的錯誤解決方法：Intel MKL FATAL ERROR: Cannot load libmkl_avx.so or libmkl_def.s

終于找到方法了&#xff1a; ubuntu14.04打開終端&#xff1a; conda install nomkl numpy scipy scikit-learn numexpr conda remove mkl mkl-service一切ok。。。。。
閱讀更多...
C++ class、struct區別

C++ class、struct區別

一、默認訪問控制不同&#xff08;最主要&#xff09; struct默認為public&#xff0c;class默認為private。這個訪問控制既是指成員的默認訪問屬性&#xff0c;又指繼承時默認的繼承屬性。 二、定義template時不同 在模版中&#xff0c;類型參數前面可以使用class或typename&a…
閱讀更多...
Alpine Linux詳解

Alpine Linux詳解

簡介 Small. Simple. Secure.Alpine Linux is a security-oriented, lightweight Linux distribution based on musl libc and busybox. Alpine Linux 是一個社區開發的面向安全應用的輕量級Linux發行版。 Alpine 的意思是“高山的”&#xff0c;它采用了musl libc和busybox以減…
閱讀更多...
java stream 原理

java stream 原理

java stream 原理 需求 從"Apple" "Bug" "ABC" "Dog"中選出以A開頭的名字&#xff0c;然后從中選出最長的一個&#xff0c;并輸出其長度 1. 最直白的實現 缺點 迭代次數過多頻繁產生中間結果&#xff0c;性能無法接受2. 平常寫法 int …
閱讀更多...
ubuntu文本模式獲得權限修改profile

ubuntu文本模式獲得權限修改profile

針對ubuntu14.04以下&#xff0c;越舊版本&#xff0c;舊的指令也有效。 進入登錄頁面&#xff0c;按shiftaltF1進入root環境&#xff0c;驗證用戶名密碼。 然后輸入&#xff1a;cd /etc 進入etc文件 在輸入&#xff1a;/usr/bin/sudo vi profile 進入profile文件的文本編輯模…
閱讀更多...
here文檔 here doc EOF重定向

here文檔 here doc EOF重定向

here文檔 here doc EOF重定向 http://www.cnblogs.com/xiangzi888/archive/2012/03/24/2415077.html 在shell腳本程序中&#xff0c;向一條命令傳遞輸入的一種特殊方法是使用here文檔。一個here document就是一段帶有特殊目的的代碼段。它使用I/O重定向的形式將一個命令序列傳…
閱讀更多...
Java常量池理解與總結

Java常量池理解與總結

2019獨角獸企業重金招聘Python工程師標準>>> 一.相關概念 什么是常量用final修飾的成員變量表示常量&#xff0c;值一旦給定就無法改變&#xff01;final修飾的變量有三種&#xff1a;靜態變量、實例變量和局部變量&#xff0c;分別表示三種類型的常量。Class文件中…
閱讀更多...
轉載：https://blog.csdn.net/dcrmg/article/details/52939318

轉載：https://blog.csdn.net/dcrmg/article/details/52939318

張正友相機標定Opencv實現以及標定流程&&標定結果評價&&圖像矯正流程解析&#xff08;附標定程序和棋盤圖&#xff09;使用Opencv實現張正友法相機標定之前&#xff0c;有幾個問題事先要確認一下&#xff0c;那就是相機為什么需要標定&#xff0c;標定需要的輸…
閱讀更多...
Redis學習筆記--Redis數據過期策略詳解==轉

Redis學習筆記--Redis數據過期策略詳解==轉

本文對Redis的過期機制簡單的講解一下　　講解之前我們先拋出一個問題&#xff0c;我們知道很多時候服務器經常會用到redis作為緩存&#xff0c;有很多數據都是臨時緩存一下&#xff0c;可能用過之后很久都不會再用到了&#xff08;比如暫存session&#xff0c;又或者只存放日行…
閱讀更多...
會員連鎖配置以及金額走向

會員連鎖配置以及金額走向

PS&#xff1a;所有電子支付方式的資金走向都是同樣的&#xff0c;配置的是什么支付方式就走什么支付方式;下面以支付寶為例說明 一、連鎖非總機模式 資金走向&#xff1a; 支付寶&#xff1a;收到的錢在主賬號配置的支付寶&#xff0c;會員卡的金額在主賬號 微信&#xff1a;收…
閱讀更多...
Python標準模塊--logging

Python標準模塊--logging

Python標準模塊--logging參考http://www.cnblogs.com/zhbzz2007/p/5943685.html1 logging模塊簡介logging模塊是Python內置的標準模塊&#xff0c;主要用于輸出運行日志&#xff0c;可以設置輸出日志的等級、日志保存路徑、日志文件回滾等&#xff1b;相比print&#xff0c;具備…
閱讀更多...
Podfile grammar

Podfile grammar

參考&#xff1a;http://www.jianshu.com/p/8af475c4f717 Podfile Podfile文件詳細描述了一個或多個工程中targets的依賴關系。Podfile會默認創建一個隱式的目標鏈接到工程中用戶的第一個target&#xff0c;名稱為“default”。 一個Podfile可以非常簡單: *pod AFNetworking, ~…
閱讀更多...
并發編程 - 協程 - 1.協程概念/2.greenlet模塊/3.gevent模塊/4.gevent實現并發的套接字通信...

并發編程 - 協程 - 1.協程概念/2.greenlet模塊/3.gevent模塊/4.gevent實現并發的套接字通信...

1.協程并發&#xff1a;切保存狀態單線程下實現并發&#xff1a;協程 切 保存狀態 yield 遇到io切&#xff0c;提高效率 遇到計算切&#xff0c;并沒有提高效率 檢測單線程下 IO行為 io阻塞 切 相當于騙操作系統 一直處于計算協程&#xff1a;。。。單線程下實現…
閱讀更多...
最新文章

Copyright @ 2022~2023