vuex中mutation/action的傳參方式
前言
在vuex中提交 mutation 是更改狀態的唯一方法,並且這個過程是同步的,非同步邏輯都應該封裝到 action 裡面。對於mutation/action,有一個常見的操作就是傳參,也就是官網上說的“提交載荷”。
這裡是關於如何在vue-cli中使用vuex的方法,我們採用將vuex設定分割成不同模組的方法。其中,state模組中配置如下
//vuex中的state
const state = {
count: 0
}
export default state;
mutation傳參
樸實無華的方式
mutation.js
//vuex中的mutation
const mutations = {
increment : (state,n) => {
//n是從元件中傳來的引數
state.count += n;
}
}
export default mutations;
vue元件中(省去其他程式碼)
methods: {
add(){
//傳參
this.$store.commit('increment',5);
}
}
物件風格提交引數
mutation.js
//vuex中的mutation
const mutations = {
decrementa: (state,payload) => {
state.count -= payload.amount;
}
}
export default mutations;
vue元件
methods: {
reducea(){
//物件風格傳參
this.$store.commit({
type: 'decrementa',
amount: 5
});
},
}
action傳參
樸實無華
action.js
/vuex中的action
const actions = {
increment(context,args){
context.commit('increment' ,args);
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
increment: (state,n) => {
state.count += n;
}
}
export default mutations;
vue元件
methods: {
adda(){
//觸發action
this.$store.dispatch('increment',5);
}
}
物件風格
action.js
//vuex中的action
const actions = {
decrementa(context,payload){
context.commit('decrementa',payload);
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
decrementa: (state,payload) => {
state.count -= payload.amount;
}
}
export default mutations;
vue元件
methods: {
reduceb(){
this.$store.dispatch({
type: 'decrementa',
amount: 5
});
}
}
action的非同步操作
突然就想總結一下action的非同步操作。。。。
返回promise
action.js
//vuex中的action
const actions = {
asyncMul(context,payload){
//返回promise給觸發的store.dispatch
return new Promise((resolve,reject) => {
setTimeout(() => {
context.commit('multiplication',payload);
resolve("async over");
},2000);
});
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
multiplication(state,payload){
state.count *= payload.amount;
}
}
export default mutations;
vue元件
methods: {
asyncMul(){
let amount = {
type: 'asyncMul',
amount: 5
}
this.$store.dispatch(amount).then((result) => {
console.log(result);
});
}
}
在另外一個 action 中組合action
action.js
//vuex中的action
const actions = {
asyncMul(context,payload){
//返回promise給觸發的store.dispatch
return new Promise((resolve,reject) => {
setTimeout(() => {
context.commit('multiplication',payload);
resolve("async over");
},2000);
});
},
actiona({dispatch,commit},payload){
return dispatch('asyncMul',payload).then(() => {
commit('multiplication',payload);
return "async over";
})
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
multiplication(state,payload){
state.count *= payload.amount;
}
}
export default mutations;
vue元件
methods: {
actiona(){
let amount = {
type: 'actiona',
amount: 5
}
this.$store.dispatch(amount).then((result) => {
console.log(result);
});
}
}
使用async函式
action.js
//vuex中的action
const actions = {
asyncMul(context,payload){
//返回promise給觸發的store.dispatch
return new Promise((resolve,reject) => {
setTimeout(() => {
context.commit('multiplication',payload);
resolve("async over");
},2000);
});
},
async actionb({dispatch,commit},payload){
await dispatch('asyncMul',payload);
commit('multiplication',payload);
}
}
export default actions;
mutation.js
//vuex中的mutation
const mutations = {
multiplication(state,payload){
state.count *= payload.amount;
}
}
export default mutations;
vue元件
methods: {
actionb(){
let amount = {
type: 'actionb',
amount: 5
}
this.$store.dispatch(amount).then(() => {
...
});
}
}
相關推薦
vuex中mutation/action的傳參方式
前言 在vuex中提交 mutation 是更改狀態的唯一方法,並且這個過程是同步的,非同步邏輯都應該封裝到 action 裡面。對於mutation/action,有一個常見的操作就是傳參,也就是官網上說的“提交載荷”。 這裡是關於如何在vue-cli中使
vuex 2的action傳參問題
原始碼看(當然從api文件看也一樣),dispatch最多就只接受兩個引數,type和payload vuex.action 只能傳遞兩個引數, 一個state是自動新增的,一個pay
struts2使用註解配置Action傳參方式
@Action(value = "operatorRoleAction", results = { @Result(name = "view", location = "/bussiness/operatorrole_view.jsp", type = "dispatche
Vue中router兩種傳參方式
Vue中router兩種傳參方式 1.Vue中router使用query傳參 相關Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&
java中給main傳參的方式
引用網址:https://blog.csdn.net/liuxingtianshi9570/article/details/39101047 一、從命令列傳參。 從cmd中進入到原始碼所在的位置,用命令:java 類名 第一個引數
.net 一種新的傳參方式作為傳參的參考,很可能在實際專案中使用
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick='<%# String.Format("return checkreturn(\"turnpost\",\"{0}
WebApi中Post請求傳參時後端的接收方式
1.單引數 [FromBody]+變數方式(不推薦):如public string PostUser([FromBody] string user_id){} 由於我們的前端習慣用key/value的方式進行請求,而此法要求key為空,有點不三不四,程式碼不規範,故此不推薦。總不能都是你寫的
Java中的組織形式、類與物件、靜態的static關鍵字、最終的final關鍵字、方法傳參方式、遞迴(階乘、斐波那契數列、漢諾塔)
Java程式的組織形式 Java程式需要把程式碼以類的形式組織起來,然後被Java編譯器編譯,再被JVM執行。Java程式是以類的結構為基礎的。 Java程式的基本要素 識別符號 識別符號命名規範 關鍵字(保留字) 關鍵字(保留字)具有專門的意義和用途
springmvc 中的Ajax中各種傳參方式(希望可以幫到大家)
傳遞普通字串 前臺: function shuzuTest2(){ $.ajax({ type:"POST", url:"<%=basePath %>saveUser2", dataTyp
jstl中c標籤使用:從action傳參到jsp
Struts2框架的學習:從controller層的UserAction.java向jsp頁面傳參 1.UserAction.java,使用request.getRequestDispatcher()方法,可以直接重定向到某個jsp頁面,並且把裝有javabean物件的Vector容器(也可以用
jq、js獲取一個頁面中的ajax資料,傳到另一個頁面顯示(通過url傳參方式)
做專案遇到了頁面之間傳輸資料的問題,特別是第一個頁面的資料是使用ajax顯示的,當點選ajax中append的li的時候,開啟另一個頁面,將第一個頁面的資料顯示在另一個頁面上,具體情況如下: 一、這是第一個頁面中的js程式碼: //顯示所有該使用者的歌單 function showMusicMe
mybatis中的兩種傳參方式#{}和¥{}原理
之前沒注意,最近公司測試提了個bug, 問題:輸入框中輸入單引號會報錯, 原因:單引號截斷了sql 總結:#{}速度快,能防止sql注入,是佔位符方式,先預編譯,然後填充引數,字串格式,相當於填空題
Ajax中的兩種傳參方式詳解
1.建立servlet類,路徑設定為ajax01,程式碼如下: package com.cdsxt.ajax; import java.io.IOException; import javax.servlet.ServletException; import java
Restful介面中,物件、Map以及Date型別的傳參方式
程式碼如下: import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestBody; import org.
C++中vector作為引數的三種傳參方式
1 #include <iostream> 2 #include <vector> 3 4 using namespace std; 5 6 void function1(std::vector<std::vector<int> >
vector作為參數的種傳參方式
ria etc 5% ray arr net tor arraylist list %E6%B7%B1%E5%BA%A6%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9Cdnn%E5%8F%8D%E5%90%91%E4%BC%A0%E6%92%AD%E
推薦的MyBatis傳參方式List、數組等
word www rom open 方式 item log 詳細 batis MyBatis 推薦的傳參方式 如果要詳細的學習 MyBatis,推薦看這個教程:https://www.w3cschool.cn/mybatis/ 1. 單個參數 //接口方法 int getA
Vue:axios中POST請求傳參問題
color catch str ios 接收 django框架 nsf head con vue的ajax請求用的是axios組件,結果在用到post請求的時候,發現給後臺傳data時,後臺(python語言+django框架)接收不到。 後臺的request.body顯示
angularjs訪問後臺傳參方式
div map err 接受 ping page ise 參數 request 第一種方式,參數放到post請求中 createTask : function(fileName,beginDate,endDate) { var url = ‘fi
python函數調用時傳參方式
sed args div spl 關鍵字參數 調用 pos none view 位置參數 位置參數需與形參一一對應 def test(a,b) #a,b就是位置參數 print(a) print(b) test(1,2) 關鍵字參數 與形參