一、目錄
1城看、vuex是什么,有什么用,什么時候用
2女气、vuex的幾個核心概念
3、在項目配置vuex
4测柠、在項目中使用vuex進行通信
5、vuex持久化
6缘滥、module
1轰胁、vuex是什么,有什么用,什么時候用
1、vuex是什么
? ? ? ? ? ? ?每一個 Vuex 應(yīng)用的核心就是 store（倉庫）朝扼≡叻В“store”基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài)? (state)擎颖。
Vuex 的狀態(tài)存儲是響應(yīng)式的榛斯。
你不能直接改變 store 中的狀態(tài)(變量的值),改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。
2搂捧、vuex有什么用
? ? ? ? ? ? ?跨組件通信
3驮俗、什么時候用
? ? ? ? ? ? ?當兩個組件不是父子關(guān)系的時候使用
2、vuex的核心概念
1允跑、state 是一個對象,里面存放我們需要用的變量
2王凑、getter 獲取state里面的變量(非必須,用了會更方便)
3搪柑、mutation 用來改變state里面的變量(狀態(tài))
4、action 動作,用來提交mutation
5索烹、module模塊,項目需要用到state的變量很多的情況下,使用module來拆分(非必需,用了便于維護)
3工碾、vuex存取的詳細流程
定義變量: 在state里面是定義變量,比如isLogin:false
存(修改)變量: $store => action => mutation => 修改state里的isLogin的值
取: this.$store.state.isLogin,
通過getter來取
使用mapGetters把state里面的值映射到data里,然后可以this.xxx來獲取
import { mapGetters } from 'vuex'
把值放入computed里
store持久化,避免刷新頁面,所有數(shù)據(jù)重置
module配置,拆分模塊方便維護
4、vuex持久化
安裝 npm i vuex-persistedstate --save-dev
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
?? state,
?? getters,
?? mutations,
?? plugins: [createPersistedState()]
})
5百姓、使用module拆分store
定義模塊,模塊也會擁有state,getters,mutations,actions,module
導入模塊
配置
