搭建vueX目錄架構 store

2021-09-28 23:30:07 字數 1383 閱讀 4491

index.js：（store入口）

import vue from 'vue'


import vuex from 'vuex'


import setting from "./modules/setting"


import user from "./modules/user"


import getters from "./getters";


vue.use(vuex)


const store = new vuex.store(,


getters


})export default store
getters.js：（通常可以將所有的getters放在外面方便獲取；當然也可以寫在modules下面js內部）

const getters=


export default getters
setting.js

const state = 


const mutations = ,


hideindex_mutation(state, n) 


}const actions = ,


hideindex(context, n) 


}// const getters = 


// }


export default
user.js（這裡啥也沒寫，只做參考）

const state = 


const mutations = 


const actions = 


const getters = 


export default
vue檔案：1：vuex_test.vue

顯示藍色的


顯示紅色的


顯示黑色的


乙個都不顯示
2：vuex_test2.vue

1111


222333
注：

1：由上可見namespaced: true後 命名可重複，但是對應函式也變成區域性函式，無法直接獲取，需要設定對應檔案路徑；

2：... 是es6的展開運算子；mapaction返回陣列物件（['c,'d']）；將其直接結構到當前組數物件中；(['a','b',...mapaction]===['a','b','c','d'])

Vuex專案實戰store

首先簡單了解一下什麼是vuex？vuex是乙個專為vue.js應用程式開發的狀態管理模式。採用集中式儲存來管理應用所有元件的狀態。以下是對vuex的使用的簡單介紹 一 安裝 npm i vuex s 安裝vuex npm i js cookie 安裝cookies，vuex重新整理後資料清空需要儲存...

store檔案Vuex的使用

import vue from vue import vuex from vuex vue.use vuex 首先宣告乙個狀態 state const state 然後給 actions 註冊事件處理函式，當這個函式被觸發時，將狀態提交到 mutaions中處理 const actions comm...

store檔案Vuex的使用

import vue from vue import vuex from vuex vue.use vuex 首先宣告乙個狀態 state const state 然後給 actions 註冊事件處理函式，當這個函式被觸發時，將狀態提交到 mutaions中處理 const actions comm...