Use uview to enable tabbar to display the corresponding number of tabbars according to permissions

adopt uview Give Way tabbar Display the corresponding number of tabbar

finish building uview-app Shelves

Normal configuration page.json Of tabbar term

After the configuration is completed, pass vuex To control tabbar list The change of

The path in the above configuration must be preceded by /

index.js

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

Vue.use(Vuex)
const tabbar=[{
	        "pagePath": "/pages/index/index",
	        "iconPath": "/static/index.png",
	        "selectedIconPath": "/static/index-selected.png",
	        "text": " home page ",
			"midButton": false,
	    }, {
	        "pagePath": "/pages/center/index",
	        "iconPath": "/static/center.png",
	        "selectedIconPath": "/static/center-selected.png",
	        "text": " I ",
			"midButton": false,
	    },{
	        "pagePath": "/pages/perms/perms",
	        "iconPath": "/static/center.png",
	        "selectedIconPath": "/static/center-selected.png",
	        "text": " Permission page ",
			"midButton": false,
	    }]
const store=new Vuex.Store({
	state:{
		tabbar_readonly:tabbar,
		tabbar:tabbar
	},
	mutations:{
		$uStore(state, payload) {
			//  Determine whether to call at multiple levels ,state The existence of objects in , Such as user.info.score = 1
			let nameArr = payload.name.split('.');
			let saveKey = '';
			let len = nameArr.length;
			if(nameArr.length >= 2) {
				let obj = state[nameArr[0]];
				for(let i = 1; i < len - 1; i ++) {
					obj = obj[nameArr[i]];
				}
				obj[nameArr[len - 1]] = payload.value;
				saveKey = nameArr[0];
			} else {
				//  Single level variable , stay state It's just the case of an ordinary variable 
				state[payload.name] = payload.value;
				saveKey = payload.name;
			}
		}
	}
})

export default store

$u.mixin.js

import {
	mapState
} from 'vuex'
import store from "@/store"

//  Try to put the user's... In the root directory store/index.js Of vuex Of state Variable , Load all into global variables 
let $uStoreKey = [];
try {
	$uStoreKey = store.state ? Object.keys(store.state) : [];
} catch (e) {}

module.exports = {
	created() {
		//  take vuex The method is hung to $u in 
		//  Usage method: ： If you want to modify vuex Of state Medium user.name Variable is " epic " => this.$u.vuex('user.name', ' epic ')
		//  If you want to modify vuex Of state Of version Variable is 1.0.1 => this.$u.vuex('version', '1.0.1')
		this.$u.vuex = (name, value) => {
			this.$store.commit('$uStore', {
				name,
				value
			})
		}
	},
	computed: {
		//  take vuex Of state All variables in , Deconstruction to global blending mixin in 
		...mapState($uStoreKey)
	}
}

main.js

import store from './store/index.js'
const storeMixins = require('./store/$u.mixin.js');
Vue.mixin(storeMixins)


const app = new Vue({
	store,
    ...App
})
app.$mount()

At every tabbar Used in pages u-tabbar Components

• because vuex Medium state.tabbar It has been infiltrated globally , So each tabbar The page already has this.tabbar This variable .

• In the component's list Attribute into tabbar Just go