Vuex的屬性及基本用法

1.state:提供唯一的公共資料源，所有共享的資料統一放到store的state中進行儲存

元件訪問state中資料的第一種方式:

this.$store.state.全域性資料名稱

元件訪問state中資料的第一種方式:

// 1.從vuex中按需匯入mapstate函式
import from 'vuex'
// 2.將全域性資料，對映為當前元件的計算屬性
computed:

2.mutation:用於變更store中的資料

①只能通過mutation變更store資料，不可以直接操作store中的資料

②通過這種方式雖然操作起來稍微繁瑣，但是可以集中監控所有資料的變化

③可以在觸發mutations時傳遞引數第二個引數

// 定義 mutation 
const store = new vuex.store(,
mutations: 
}})//觸發mutation 
methods: 
}

觸發mutations的第一種方法：

this.$store.commit()

觸發mutations的第二種方法：

// 1.從vuex中按需匯入mapmutations函式
import from 'vuex'
// 2.將全域性資料，對映為當前元件的計算屬性
computed:

3.action:用來處理非同步任務

在aciton中通過觸發mutation的方法間接變更資料

用法：

// 定義 mutation 
const store = new vuex.store(,
mutations: 
}，actions: , 1000)
}}})
//觸發mutation 
methods: 
}

觸發actions的第一種方法：

this.$store.dispatch()

觸發actions的第二種方法：

// 1.從vuex中按需匯入mapactions函式
import from 'vuex'
// 2.將全域性資料，對映為當前元件的計算屬性
computed:

4.getter:用於對store中的資料進行加工處理形成新的資料

①getter 可以對store中已有的資料加工處理形成新的資料

②store中資料發生變化，getter的資料也會跟著變化

// 定義 mutation 
const store = new vuex.store(,
getters: 
}})

觸發getters的第一種方法：

this.$store.getters.方法

觸發actions的第二種方法：

// 1.從vuex中按需匯入mapgetters函式
import from 'vuex'
// 2.將全域性資料，對映為當前元件的計算屬性
computed:

5.module:模組化vuex，可以讓每乙個模組擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。

Vuex基本用法

突變方法一方法二 2 mutation 突變點選實現隔一秒加1 store.js mutations 1000 子元件 addition.vue 延時 1 點選延時 1按鈕，會發現 count 的值還是初始值，未發生變化所以不要在 mutations 突變中執行非同步操作 acti...

vuex的基本用法

1 this.sto re 我們可以通過thi s.store 我們可以通過 this.store 我們可以通過th is.store 在vue的元件中獲取 vuex的例項。2 state vuex中的資料來源，我們可以通過this.store.state 獲取我們在vuex中宣告的全域性變數...

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基本用法

vuex的基本用法

vuex的5個屬性的用法 vue篇

相關推薦