1. 在src目录下新建一个store文件夹,index.js
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
import app from './modules/app'
import tab from './modules/tab'
import iframe from './modules/iframe'
import user from './modules/user'
import menu from './modules/menu'
const store = new vuex.Store({
modules: {
app: app,
tab: tab,
iframe: iframe,
user: user,
menu: menu
}
})
export default store
随着项目的增减路由状态也会变多,所以建个文件夹管理所有,然后通过index.js统一回调
2.在main.js中添加vuex,路由的状态管理
import store from '@/store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
3.在每个页面中都可以通过 $store.state.返回名称.参数,以菜单栏的收缩为例
export default {
state: {
themeColor: "#716aca", // 主题颜色
oldThemeColor: "#225235", // 上一次主题颜色
},
setThemeColor(state, themeColor){ // 改变主题颜色
state.oldThemeColor = state.themeColor
state.themeColor = themeColor
},
}
4.vue中调用
<div class="main-header" :style="{'background':themeColor}">
<div class="sidebar" :style="{'background':oldThemeColor}">
computed: { ...mapState({ themeColor: state => state.app.themeColor, oldThemeColor: state => state.app.oldThemeColor, collapse: state => state.app.collapse }) }
这样就可以记录主题颜色了