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>

参考:https://juejin.im/post/5b7f8d3d6fb9a019d67c0fb7

猜你喜欢

转载自www.cnblogs.com/darknoll/p/11238271.html