uniapp_切換主題

1. 先創建一個index.vue文件：
   
2. 在uni.scss 里用變量定義顏色：
   
3. 配置淺色 css 樣式：
   
4. 配置暗色主題顏色:   只需要改變顏色變量名;
   
5. 
   
6. 創建一個store文件：
   在里面創建一個  index.js  和  modules文件夾
   
   在 theme.js  里面 配置如下：

export default {
	state: {
		curThemeType: 'light',		
	},
	getters: {
		getCurThemeType(state) {
			return state.curThemeType
		},		
	},
	mutations: {
		setCurThemeType(state,data) {
			state.curThemeType = data
		},		
	},
}

在 index.js里 引入Vuex 和 theme.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
import theme from './modules/theme'
export default new Vuex.Store({
    modules:{
        theme
	}
})

最后在main.js里引入 剛剛創建的store文件：


7. 使用 mixin混合機制，讓每個組件都能獲得擁有 mixin中的方法和屬性：
   創建一個utils文件夾 和一個 miixn.js文件
   在mixin.js里引入  Vuex里的方法
   
   
   然后再main.js里引入  minxin.js:
   
8. 最后子需要 在index.vue里配置如下:
   
9. 點擊切換主題:

import {mapMutations} from "vuex"
	export default {
		data() {
			return {
				title: 'Hello',
				fag: false
			}
		},
		onLoad() {

		},
		methods: {
		...mapMutations(['setCurThemeType']),
			handle(val) {
				if(val == 'light'){
					this.setCurThemeType(val)
				}else if(val == 'dark'){
					this.setCurThemeType(val)
				}
			}
		}
	}

10. 總結:
    ⊙ 實際上只是切換了 class類名  layout-wrap  和 login-wrap-dark
    ⊙ 使用Vuex的作用: 通過 this.setCurThemeType()傳參 light 或者 drak, 然后將主題存在 state里面;方便任何組件使用;
    ⊙ 使用ximin()的作用:
            因為每個頁面都會使用到   <view class="layout-wrap" :class="getCurThemeType=='dark' ? 'login-wrap-dark':''">
            所以直接在 mixin.js里面 引用了 Vuex, 並且把Getters 和 Mutations 存放在  computed 和  methods里面;
            最后通過  Vue.mixin(themeMixin)  把這computed 和  methods混入到所有 Vue組件里面;
            這樣任何組件可以直接使用 computed 里面的 getCurThemeType,
    
    
11. 配置默認顯示主題:
    在APP.vue里 配置如下:
    onLaunch()   這個方法是當小程序加載完畢后就執行;
    如果緩存有 主題,就用緩存中的主題, 沒有則用 light主題