nuxt之vuex的使用
生活随笔
收集整理的這篇文章主要介紹了
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的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
