zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Unix高级编程之文件权限
    gdb手册
    libev 使用
    Unix高级环境编程之fcntl函数
    设计基于锁的并发数据结构
    CPU占用分析
    atomic用法
    RESTful架构搜集
    神奇的VIM
    [转] boost:lexical_cast用法
  • 原文地址:https://www.cnblogs.com/darknoll/p/11238271.html
Copyright © 2011-2022 走看看