VueX

Vuex(管理器)

1. state 仓库的原始数据 {}
2. getters 查询器集合 {} 里面包含查询器方法
3. mutations 修改器集合{} 里面包含修改方法

---

1.在store的index.js中配置

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

// 注册vuex 插件

Vue.use(Vuex)

// 从本地存储里取出来的
//LocalStorage(本地储存) 刷新页面本地储存不会被清空
// SessionStorage(本地存储)刷新页面本地储存会被清空
const user = JSON.parse(unescape(sessionStorage.getItem('user'))) || null

console.log(user)
// 创建一个仓库
export default new Vuex.Store({
    state: {
        user: user
    },
    //不可以改变原始数据
    getters: {
        user(state) {
            return state.user
        }        
    },
    //可以改变原始数据
    mutations: {
        CHANGE_USER(state, data) {
            sessionStorage.setItem('user', escape(JSON.stringify(data)))
            state.user = data
        },
        LOG_OUT(state) {
            sessionStorage.removeItem('user')
            state.user = null
        }
    }
})

---

2. main.js中配置

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
// 导入iview
import iview from 'iview'
// 导入iview的样式
import 'iview/dist/styles/iview.css'


// 注册iview插件
Vue.use(iview)

Vue.config.productionTip = false

router.beforeEach((to, from, next) => {
  if (to.meta.auth) {
    if (store.getters.user) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})



/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, // 加入路由
  store,  // 加入vuex
  components: { App },
  template: '<App/>'
})


// import plugin from './plugin'

// console.log(plugin)

// Vue.use(plugin)


// Vue.useing = function(plugin, ...args) {
//   plugin.install(Vue, ...args)
// }


// Vue.useing(plugin, 1, 2 ,3 ,5 )

/**
 * Vue的插件 必须是一个对象
 * 对象里面必须包含一个install方法
 * install(Vue, options)
 * 1. Vue 就是当前Vue的类
 * 2. options 对象 这个是使用插件时传递的配置参数（这个插件要有配置参数）
 */
// const plugin = {
//   install(Vue, options) {

//   }
// }

---

3. 在组件中混入vuex的辅助函数

 import { mapState, mapGetters, mapMutations } from 'vuex'

    混入原理解析
    // function mapGetters(arr) {
    //     const obj = {}
    //     arr.forEach(k => {
    //         obj[k] = function() {
    //             return this.$store.getters[k]
    //         }
    //     })
    //     return obj
    // }

    // function mapMutations(arr) {
    //     const obj = {}
    //     arr.forEach(k => {
    //         obj[k] = function(val) {
    //             return this.$store.commit(k, val)
    //         }
    //     })
    //     return obj
    // }

    export default {
        props: {
            logo: {
                type: String,
                default: '后台管理系统'
            },
            dropdownMenu: Array,
            avatar: String
        },
        methods: {
            ...mapMutations([

            ])
        },
        computed: {
            ...mapGetters([
                'user'
            ])
        }
    }
import { mapMutations } from 'vuex' 
methods: {
            ...mapMutations([//...表示合并对象然后混入
                'LOG_OUT'
            ]),
            select() {
                this.LOG_OUT()
                this.$router.push('/login')
            }
        }

辅助函数

1.mapMutation()放在方法methods
2.mapGetters()放在compute

base64(前端加密)

LocalStorage(本地储存) 刷新页面本地储存不会被清空

SessionStorage(本地存储)刷新页面本地储存会被清空