vue項目中傳回按鈕案例(用vuex控制傳回按鈕的顯示或者隐藏)

在vue的項目中避免不了會有傳回按鈕的出現，恰當的頁面，傳回按鈕的顯示或者隐藏，我是用vuex來管理的，

好了，直接上代碼吧

<el-button type="primary" @click="returnBtn" v-if="ifshow">傳回</el-button>

1.首先要  v-if  條件渲染

2.建立檔案store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

ifshow: false      //初始值

},

mutations: {

uploadIfshow (state, value) {

state.ifshow = value;

}

}

})

3.在main.js中   記得将store開放出去

import store from './store/store'

new Vue({

router,

store,

render: h => h(App),

}).$mount('#app')

//按鈕頁面  //ifshow  哪些頁面按鈕要隐藏

//computed : {

//ifshow () {

//return this.$route.path !== '/home/work'    //例子而已

//}

//},

4.要顯示的頁面commit送出mutations

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

搞定！試試吧！