vue使用vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。因此，把组件的共享状态抽取出来，以一个全局单例模式管理呢。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

1、安装vuex

npm install --save vuex

2、新建store/index.js文件

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        isLogin: (localStorage.getItem('sfUserInfo') ? true : false),
        sfUserInfo: localStorage.getItem('sfUserInfo')
    },
    getters:{
        sfUserInfo: (state)=> {
            return state.isLogin ? JSON.parse(state.sfUserInfo) : {}
        }
    },
    mutations: {
        storeLogin(state, data){
            api.login(data).then(res => {
                if (res.code == 1){
                    Message.success('Login successfully')
                    localStorage.setItem('sfUserInfo', JSON.stringify(res.data))
                    state.isLogin = true
                    setTimeout(() => router.push('/index'), 1000)
                }else{
                    state.isLogin = false
                    state.sfUserInfo = {}
                    Message.error(res.msg)
                }
            })
        },
        storeGetUserProfile(state, data = {}){
            api.getUserProfile(data).then(res => {
                if (res.code && res.code == 1){
                    if (state.sfUserInfo){
                        let userInfo = JSON.parse(state.sfUserInfo)
                        res.data.enyTicket = userInfo.enyTicket //保留原有token
                    }
                    localStorage.setItem('sfUserInfo', JSON.stringify(res.data))
                    state.isLogin = true
                }
            }, (err) => {
                localStorage.removeItem('sfUserInfo')
                state.isLogin = false
                state.sfUserInfo = {}
            })
        },
        storeLogout(state, data = {}){
            localStorage.removeItem('sfUserInfo')
            state.isLogin = false
            state.sfUserInfo = {}
        },
    },
    actions: {
    },
    modules: {
    }
})

3、使用vuex/store

    import {mapState, mapGetters, mapMutations} from 'vuex'
    export default {
        name: "home",
        components: {
            headBox,
            menus,
            shareModal
        },
        data() {
            return {
            }
        },
        computed: {
          ...mapState(['isLogin']),
            ...mapGetters(['sfUserInfo']),
        },
        created() {
        },
        mounted() {
        },
        methods: {
         ...mapMutations(['storeLogin'])
        }
    }