nuxt之vuex的使用

先来了解一下官网：https://www.nuxtjs.cn/guide/vuex-store

一、首先在 store 文件下新建一个index.js文件

const state = () => ({

    flag: false

})

const mutations = {

    add(state, data) {

        state.flag = data

    },

}

export default {state, mutations}

二、在页面中调用store里的方法

<p class="sea_school font14" @click="go_sc"> 收藏</p>

 go_sc(){

     var token = localStorage.getItem('token')

     if(token){

           this.getSc()

           this.sc = !this.sc

    }else{

       //去登录_________先去登录才能收藏

       this.$message({

           message: "请先登录",

           type: 'error',

       })
　　　　// 本次使用vuex是为了改变登录弹框 flag的值，当点击收藏按钮，未登录时重定向到登录页面

       this.$store.commit('add', true)

   }

},

三、页面中使用 state中的 flag 值

    <!-- 登录弹框 -->

    <div class="mask" v-show="flag">

        //....登录弹框的内容省略

    </div>

_________________________________________________

<script>

import {mapState} from 'vuex

export defauilt {

    computed:{

    ...mapState(['flag'])

  },

}

</script>

好啦，大功告成！！

巴特西

nuxt之vuex的使用

最新文章

热门文章