摘要:的數據會在上顯示出來,用戶會根據上的內容進行操作,從而觸發,接著再去影響是單向數據流的方式驅動的。當我們的應用遇到多個組件共享狀態時,單向數據流的簡潔性很容易被破壞。中的非常類似于事件每個都有一個字符串的事件類型和一個回調函數。
組件是Vue最強大的功能之一,而組件實例的作用域是相互獨立的,意味著不同組件之間的數據是無法相互使用。組件間如何傳遞數據就顯得至關重要,這篇文章主要是介紹Vuex。盡量以通俗易懂的實例講述這其中的差別,希望對小伙伴有些許幫助。
一、Vuex 是什么?Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態,并以相應的規則保證狀態以一種可預測的方式發生變化。
二、什么是“狀態管理模式”?一個簡單的 Vue 計數應用開始:
new Vue({ // state data () { return { count: 0 } }, // view template: `{{ count }}`, // actions methods: { increment () { this.count++ } } })
這個狀態自管理應用包含以下幾個部分:
state,驅動應用的數據源;
view,以聲明方式將 state 映射到視圖;
actions,響應在 view 上的用戶輸入導致的狀態變化。
state的數據會在 view上顯示出來,用戶會根據 view 上的內容進行操作,從而觸發 actions,接著再去影響 state(vue 是單向數據流的方式驅動的)。
當我們的應用遇到多個組件共享狀態時,單向數據流的簡潔性很容易被破壞。下面的圖,是把組件的共享狀態抽取出來,以一個全局單例模式管理。
1. state
state:頁面狀態管理容器對象。集中存儲Vue components中data對象的零散數據,以進行統一的狀態管理。頁面顯示所需的數據從該對象中進行讀取。
{{ $store.state.count }}console.log(this.$store.state.count)
2. getters
getters:Vuex 允許我們在 store 中定義“getter”(可以認為是 store 的計算屬性)。就像計算屬性一樣,getter 的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發生了改變才會被重新計算。(getters從表面是獲得的意思,可以把他看作在獲取數據之前進行的一種再編輯,相當于對數據的一個過濾和加工。getters就像計算屬性一樣,getter 的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發生了改變才會被重新計算。)
定義getter:
getters: { done(state) { return state.count + 1; }, }
3. mutations
mutations:更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件:每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方,并且它會接受 state 作為第一個參數:
const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 變更狀態 state.count++ } } })
組件通過commit提交mutations的方式來請求改變state
this.$store.commit("increment")
提交載荷(Payload)
mutations方法中是可以傳參的,具體用法如下:
mutations: { // 提交載荷 Payload add(state, n) { state.count += n } }, this.$store.commit("add", 10)
4.Action
Action:類似于 mutation,不同在于Action 提交的是 mutation,而不是直接變更狀態;Action 可以包含任意異步操作。
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit("increment") } } })
不同于mutations使用commit方法,actions使用dispatch方法。
this.$store.dispatch("incrementAsync")
context
context是與 store 實例具有相同方法和屬性的對象。可以通過context.state和context.getters來獲取 state 和 getters。
以載荷形式分發
incrementAsyncWithValue (context, value) { setTimeout(() => { context.commit("add", value) }, 1000) } this.$store.dispatch("incrementAsyncWithValue", 5)
5.Module
由于使用單一狀態樹,應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時,store 對象就有可能變得相當臃腫。
為了解決以上問題,Vuex 允許我們將 store 分割成模塊(module)。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割:
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 的狀態
模塊的局部狀態
對于模塊內部的 mutation 和 getter,接收的第一個參數是模塊的局部狀態對象。
const moduleA = { state: { count: 0 }, mutations: { increment (state) { // 這里的 `state` 對象是模塊的局部狀態 state.count++ } }, getters: { doubleCount (state) { return state.count * 2 } } }Vuex計數器的例子:
在src目錄下創建一個store文件夾。
store/store.js import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0, show: "" }, getters: { counts: (state) => { return state.count } }, mutations: { increment: (state) => { state.count++ }, decrement: (state) => { state.count-- }, changVal: (state, v) => { state.show = v } } }) export default store
state就是我們的需要的狀態,狀態的改變只能通過提交mutations,例如:
increase() { this.$store.commit("increment") }
帶有載荷的提交方式:
changObj () { this.$store.commit("changVal", this.obj) }
載荷也可以是一個對象,這樣可以提交多個參數。
changObj () { this.$store.commit("changVal", { key:"" }) }
在main.js中引入store.js
import store from "./store/store" export default new Vue({ el: "#app", router, store, components: { App }, template: "" })
在組件中使用
在組建可以通過$store.state.count獲得狀態
更改狀態只能以提交mutation的方式。
mapState、mapGetters、mapActions{{$store.state.count}}
{{$store.state.show}}
很多時候 , $store.state.dialog.show 、$store.dispatch("switch_dialog") 這種寫法又長又臭 , 很不方便 , 我們沒使用 vuex 的時候 , 獲取一個狀態只需要 this.show , 執行一個方法只需要 this.switch_dialog 就行了 , 使用 vuex 使寫法變復雜了 ?使用 mapState、mapGetters、mapActions 就不會這么復雜了。
以 mapState 為例 :
相當于 :
mapGetters、mapActions 和 mapState 類似 , mapGetters 一般也寫在 computed 中 , mapActions 一般寫在 methods 中。
Vuex官方文檔
Vue面試中,經常會被問到的面試題
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98360.html
摘要:有興趣的同學可以查看之前發布的文章學習系列一學習實踐筆記附學習系列二學習實踐筆記附學習系列三和網絡傳輸相關知識的學習實踐學習系列四打包工具的使用學習系列五從來聊聊學習系列項目地址項目暫時有點亂,之后會進行整理優化。 上次學習了vue-router的使用,讓我能夠在各個頁面間切換,將頁面搭建了起來。這次則要學習vue的狀態管理模式——vuex。它類似于redux來應用的全局狀態。 注:本...
摘要:創建項目直接在工作空間下用來創建安裝依賴執行成功的話講出現這個畫面正式開始寫項目首先修改項目結構目前的結構新建一個文件夾,用來管理部分狀態,比如登錄里面新建一個新建一個文件夾,用來寫的請求借口里面放一個新建一個文件夾,用來存放或模擬數據, 創建項目 learn 直接在工作空間下用vue-cli來創建vue init webpack learnshowImg(https://segmen...
摘要:官網地址聊天機器人插件開發實例教程一創建插件在系統技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。我會簡單基于的簡潔視頻播放器組件前端掘金使用和實現購物車場景前端掘金本文是上篇文章的序章,一直想有機會再次實踐下。 2道面試題:輸入URL按回車&HTTP2 - 掘金通過幾輪面試,我發現真正那種問答的技術面,寫一堆項目真不如去刷技術文章作用大,因此刷了一段時間的博客和掘金,整理下曾經被...
摘要:如果不熟悉,在這個教程里面,我們會通過構建一個筆記應用來學習怎么用。這個是我們要構建的筆記應用的截圖你可以從下載源碼,這里是的地址。每當用戶點擊筆記列表中的某一條時,組件會調用來分發這個會把當前選中的筆記設為。 原文:Learn Vuex by Building a Notes App,有刪改。 本文假設讀者熟悉 Vuex 文檔 的內容。如果不熟悉,you definitely sho...
閱讀 1883·2021-11-22 09:34
閱讀 3010·2021-09-28 09:35
閱讀 13374·2021-09-09 11:34
閱讀 3594·2019-08-29 16:25
閱讀 2820·2019-08-29 15:23
閱讀 2035·2019-08-28 17:55
閱讀 2424·2019-08-26 17:04
閱讀 3044·2019-08-26 12:21