Vuex使用及說明

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

(還不明白？通俗點說，就是全域性變數，每個元件都可以用到~並且可以隨時改變和計算等)

state // 它是儲存全域性變數名（定義變數） mutations // 它是處理同步，並修改 state 裡的資料 actions // 它是處理非同步，或者多個同步的區域，呼叫dispatch 執行mutations 函式改變state getters // 它就像vue元件裡的computed 計算屬性，有的時候後台返回來的資料，並不是我們想要的資料，我們需要處理或者拼接後使用，多個元件使用的時候我們會用到。（注意：getter 在通過方法訪問時，每次都會去進行呼叫，而不會快取結果。）

modules // 這個是模組區分

import vue from
'vue'
import vuex from
'vuex'
// 引入vuex 拆分檔案
import state from
"./state/state"
;import mutations from
"./mutations/mutations"
;import actions from
"./actions/actions"
;import getters from
"./getters/getters"
;import modules from
"./modules/modules"
;vue.
use(vuex)
var storedata =
;/**
* 這裡主要解決了，頁面重新整理，資料丟失問題。
* 思路：頁面重新整理的時候將store裡state的值存到sessionstorage中，然後從sessionstorage中獲取，再賦值給store。
*  然後再把session裡面存的刪除即可，相當於中介軟體的作用。
*///在頁面載入時讀取sessionstorage裡的狀態資訊
if(sessionstorage.
getitem
("store"))
//在頁面重新整理時將vuex裡的資訊儲存到sessionstorage裡
window.
addeventlistener
("beforeunload",(
)=>);
export
default
newvuex.store
(storedata)

export default

/** * 1、引數說明 * @state 定義好的變數（要修改的變數名，通過.***來獲取） * @value 傳遞過來的引數（要改變的值） * 2、注意事項 * 不接受第3個引數，所以傳多個引數的時候，把第二個寫成物件傳入 * */ export default ,// 修改登入狀態 setloginfn (state, value)

}

/** * 1、引數說明 * @store 是store物件，可以通過store.commit來呼叫mutations函式（簡潔化：可以通過{}來解構出來使用） * @value 傳遞過來的引數（要改變的值） * */ export default ,that) ,2000)}

}

/** * 1、引數說明 * @state 指定義好的變數（要修改的變數名，通過.***來獲取） * @getters 可以呼叫所有getters方法 * */ export default}, // 拼接名稱（以變數名稱來使用） setsplicefn (state, getters,

)}

/** * 1、屬性說明 * @namespaced 設定為true 的時候，模組的就是私有區域，（因為vue 預設mutations,actions,getters 是全域性作用域） * 2、注意事項 * 使用actions,想獲取全域性的mutations方法引數上新增屬性通過this['a/afn']()來獲取值 '/'來區分哪個模組 * 可以拿到全域性的state, 就是第3個引數rootstate * (詳情說明，請參考： * */ export default},

b:}}

// 引入要展開的名稱
import
from
'vuex'
computed:
),// ...mapstate(
// }),
// 注意，getter 在通過方法訪問時，每次都會去進行呼叫，而不會快取結果。
...mapgetters([
'setsplicefn'
,'gettodobyid'])
,},// 方法使用
methods:

// 自定義外掛程式(跟state  同級)
// plugins: [
//   (store)=>
// ]
store.
watch
((state)
=>,(
)=>
)store.
subscribe
((mutation,state)
=>
)store.
subscribeaction
((action, state)
=>
)

Vuex使用及說明

普通js檔案使用vuex的說明

vuex中mapGetters的使用及簡單實現原理

vuex使用規則

Vuex使用及說明

普通js檔案使用vuex的說明

vuex中mapGetters的使用及簡單實現原理

vuex使用規則

相關推薦