vuex的5個核心用法

2021-10-05 22:16:44 字數 1172 閱讀 6871

vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可**的方式發生變化(可以把多個元件鏈結起來)

vuex中5個主要核心

state(相當於單頁面data,用於存放需要元件中共享的資料)

gettermutation(相當於單頁面methods,存放自定義方法)

action(相當於單頁面methods,存放自定義非同步方法,也就是訪問伺服器的方法)

module

用腳手架建立vue專案時勾選

專案中src/store/index.js是我們要的vuex

不管是獲取store中的state還是mutatoion還是action都必須先獲取到$store的例項

this.$store 相當於獲取到了$store的例項,如何通過例項在獲取裡面的物件store中的屬性值count

// 注意在檢視中可以省略this直接$store.state.count

//在methods中不能省略this

我們在store/index.js 中的state宣告有個變數count,在add/subject獲取方法

this.$store.state.count
commit方法用於呼叫vuex store中的mutations中的方法

子元件:add.vue

子元件:subject.vue

vuex的5個核心概念三(actions)

4.actions 非同步操作 在某些情況下確實在vuex中需要進行非同步操作,比如網路請求,這個時候就要將方法寫在actions中 actions類似於mutations,但是是用來替代mutations進行非同步操作的 在actions中提交mutation,並且可以包含任何的非同步操作。act...

vuex的5個屬性的用法 vue篇

建立vuex.js 配置依賴 import vue from vue import vuex from vuex vue.use vuex exoprt var store default newvuex.store 定義屬性值 mutations 設定方法函式,注意 mutations不能有非同步...

vuex的五個核心概念簡述

vuex是vue.js應用設計的狀態管理架構,通俗理解,可以想象就是vue元件中的data 1.state 基本資料來源 簡單的state const store newvuex.store 2.mutatios 提交更改資料的方法 同步 儲存 第乙個引數是vuex中對應mutation的方法,第二...