vue中store模块化

Dear 丶 2021-11-22 05:28 278阅读 0赞

![606260-20190724151938447-1765205827.png][]

![606260-20190724152102869-1839534279.png][]

![606260-20190724152146921-1905211176.png][]

![606260-20190724152224315-1920669882.png][]

![606260-20190724152311489-338559794.png][]

![606260-20190724152342070-706192698.png][]

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>

![606260-20190724152537146-1722419298.png][]

![606260-20190724152620462-445684105.png][]

参考：[https://juejin.im/post/5b7f8d3d6fb9a019d67c0fb7][https_juejin.im_post_5b7f8d3d6fb9a019d67c0fb7]

转载于:https://www.cnblogs.com/darknoll/p/11238271.html

[606260-20190724151938447-1765205827.png]: /images/20211122/62cb3698d5bd48aaafebd90b447c9357.png
[606260-20190724152102869-1839534279.png]: /images/20211122/dce40dc271234cf9a6b6ffc23470ad51.png
[606260-20190724152146921-1905211176.png]: /images/20211122/7bf0d67fc46546d38210a2390d941fa4.png
[606260-20190724152224315-1920669882.png]: /images/20211122/2eb50ec0a96d4a2491eb394122a509eb.png
[606260-20190724152311489-338559794.png]: /images/20211122/6dbedb12a7df4dc78d0bc538cfd08e1e.png
[606260-20190724152342070-706192698.png]: /images/20211122/020fe4005eeb4604bc6bb5b4a23f662b.png
[606260-20190724152537146-1722419298.png]: /images/20211122/60416f359693462ca307e8a4314ef932.png
[606260-20190724152620462-445684105.png]: /images/20211122/b53463d7f3d84eb5a4e091bc1fbe7c5f.png
[https_juejin.im_post_5b7f8d3d6fb9a019d67c0fb7]: https://juejin.im/post/5b7f8d3d6fb9a019d67c0fb7