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)
=>
)
普通js檔案使用vuex的說明
vue元件的用法 mutations同步函式的用法 用法1 this.funcionname 用法2 this.sto re.c ommi t f unci onna me acti ons異 步函式的 用法用法 1 th is.f unci onna me 用法2 this store.commi...
vuex中mapGetters的使用及簡單實現原理
在vue專案的開發過程中必然會使用到vuex，對vue專案公用資料進行管理，從而解決元件之間資料相互通訊的問題，如果不使用vuex，那麼一些非父子元件之間的資料通訊將會變得極為繁瑣。1.這裡首先說下專案中mapgetters的使用先看下store部分目錄結構 index.js檔案 import vu...
vuex使用規則
下面利用webpack搭建平台。import vue from vue import vuex from vuex import index from index.vue vue.use vuex const store new vuex.store var root document.create...