Vuex（二）修改狀態 傳遞引數 模組組

1、mutations（修改狀態）

（1）template中直接使用$store.commit( )觸發

// template

"$store.commit('add')"
>
+<
/button>
// src/vuex/store.js
const mutations =
}

="hello"
>
}<
/h1>
}<
/h2>
3、、直接呼叫相應的方法 --
>
"add"
>
+<
/button>
<
/div>
<
/template>
// 1、引入mapmutations
import
from
'vuex'
export
default},
// 通過mapstate的json來賦值
computed:
mapstate()
,// 2、methods中加入mapmutations
methods:
mapmutations([
'add'])
}<
/script>
<
/style>

（1）基本用法

// src/vuex/store.js

const getters =
}

computed:

}

// 1、引入mapmutations

import
from
'vuex'
// 2、使用
computed:

（1）store.js中增加非同步**

// src/vuex/store.js

const actions =),
3000);
console.
log(
'我比reduce提前執行');
}}

// template

"add"
>
+<
/button>
// script
methods:
}

// template

"add"
>
+<
/button>
// script
// 引入mapactions
import
from
'vuex'
// 使用mapactions
methods:

// actions中傳遞引數

const mutations =
}// actions中傳遞引數
const actions =
, n)
,3000);
console.
log(
'我比reduce提前執行');
}}

// template

"add"
>
+<
/button>
// script
methods:
}

// template

"add(99)"
>
+<
/button>
// script
methods:

// 模組a

const modulea =
,  mutations:
,  actions:
,  getters:
}// 模組b
const moduleb =
,  mutations:
,  actions:
}// 組裝
const store =
newvuex.store(}
)// 取值
store.state.a // -> modulea 的狀態
store.state.b // -> moduleb 的狀態

（1）src/vuex/module1.js

// 模組1

const module1 =},
// 編寫動作
mutations:},
// 取值
getters:},
// 建立驅動，可非同步
actions:
, data)}}
export
default module1;

// 模組2

const module2 =},
// 編寫動作
mutations:},
// 取值
getters:},
// 建立驅動，可非同步
actions:
, data)}}
export
default module2;

// 引入vue

import vue from
'vue'
// 引入vuex
import vuex from
'vuex'
// 引入module1
import module1 from
'@/vuex/module1'
// 引入module2
import module2 from
'@/vuex/module2'
// 使用vuex
vue.
use(vuex)
// 模組注入
const store =
newvuex.store(}
)// 輸出store
export
default store;

>
<
!-- module1 --
>
}<
/h2>
"change1()"
>module1改變<
/button>
<
!-- module2 --
>
}<
/h2>
"change2()"
>module2改變<
/button>
<
/div>
<
/template>
// 引入快捷方法
import
from
'vuex'
export
default},
computed:
)// mapgetter取值
...mapgetters([
'module1'
,'module2'])
},methods:
}<
/script>
<
/style>

狀態儲存和引數傳遞

這種情況按級別可以分為三種 應用程式層的狀態和資訊儲存，使用者層的狀態和資訊儲存，還有頁面級別的狀態和資訊的儲存。按位址分可以分為伺服器端和客戶端的儲存。session 只針對但前登陸使用者 儲存在伺服器端 cache 物件應用於所有使用者 有乙個儲存時間的字段 存在快取區 cookie 儲存小容量...

python 引數傳遞二

1 為引數設定預設值 語法 def functionname paramenter1 defaultvalue1 functionbody 引數說明 呼叫時沒有傳參，但是設定了預設值，這李設定的預設值是乙個空的列表，所有可以對引數進行操作。def demo obj print obj print o...

vuex學習 為每個需要傳遞的引數建立store

之前在元件,頁面間進行引數傳遞,都是通過emit,v on,bus.emit等,最近發現了乙個新的機制.官網 什麼是vuex 又從vue element admin中學到一種使用方式,分享一下 新建專案之後,新增store資料夾,結構如上圖所示.為需要傳遞引數的頁面建立.js檔案.import vu...