美文网首页Vue学习
在uni-app中使用Vuex

在uni-app中使用Vuex

作者: 冰滩波纹 | 来源:发表于2019-02-18 09:20 被阅读427次

    在 uni-app 项目根目录下新建 store 目录,在 store 目录下创建 index.js 定义状态值

    const store = new Vuex.Store({  
        state: {  
            login: false,  
            token: '',  
            avatarUrl: '',  
            userName: ''  
        },  
        mutations: {  
            login(state, provider) {  
                console.log(state)  
                console.log(provider)  
                state.login = true;  
                state.token = provider.token;  
                state.userName = provider.userName;  
                state.avatarUrl = provider.avatarUrl;  
            },  
            logout(state) {  
                state.login = false;  
                state.token = '';  
                state.userName = '';  
                state.avatarUrl = '';  
            }  
        }  
    })  
    

    然后,需要在 main.js 挂载 Vuex

    import store from './store'  
    Vue.prototype.$store = store  
    

    最后,在 pages/index/index.vue 使用

    <script>  
        import {  
            mapState,  
            mapMutations  
        } from 'vuex';  
    
        export default {  
            computed: {  
                ...mapState(['avatarUrl', 'login', 'userName'])  
            },  
            methods: {  
                ...mapMutations(['logout'])  
            }  
        }  
    </script>  
    

    相关文章

      网友评论

        本文标题:在uni-app中使用Vuex

        本文链接:https://www.haomeiwen.com/subject/plvoeqtx.html