vue中store模块化
Hello.vue如下:
<template> <div> <button type="button" style="margin-top: 20px" @click="getLogin">获取登录状态</button><br/> <button type="button" style="background:#f60;margin-top: 20px;color:#fff;" @click="setTheme('orange')">设置主题f60</button><br/> <button type="button" style="background:#2577e3;margin-top: 20px;color:#fff;" @click="setTheme('blue')">设置主题f60</button><br/> <router-link tag="div" to="/user"> <button type="button" style="margin-top: 20px">去账户中心</button> </router-link> </div> </template> <script> import ajax from '@/fetch/index' import {Cookie} from '@/storage/index' import { mapState, mapGetters ,mapActions,mapMutations} from 'vuex' export default { data() { return { } }, mounted() { }, methods: { getLogin() { console.log(this.isLogin) //console.log(this.$store.getters.isLogin) }, setTheme(color) { this.$store.dispatch('setbgColor',color) //console.log(this.$store.getters.bgColor) } }, created() { const _this = this; ajax.get('apis/register/wap/member/check',{}) .then(function(res) { _this.$store.dispatch('isLogin',{"isLogin": res.data.result.isLogin}) }) }, computed: { ...mapGetters([ 'isLogin' ]) } } </script> <style> button { border: none; width: 120px; height: 40px; cursor: pointer; outline: none; } .button { display:inline-block; background:#f60;margin-top: 20px; color:#fff; height:40px; width:120px; text-decoration: none; line-height: 40px; text-align: center; } </style>