vuex 控制底部导航

滴滴滴~

发车了！

1.安装vuex

npm install vuex ---save复制代码

2.引用vuex ，写操作逻辑

1.新建一个文件夹store(我们以store 为例),里面新建文件 index.js

2.在页面中引用vuex

 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)复制代码

3.编写简单逻辑

//定义一个state,存入变量showBottom
const state={
	showBottom:true,
}
//编写显示和隐藏方法
const mutations={
	
	hidBottom:function(state){
		state.showBottom = false
	},
	showBottom:function(state){
		state.showBottom = true
	}
}
//导出
const store = new Vuex.Store({
  state,
  actions,
  mutations
})

export default store ;
复制代码

3.在页面中使用

1.在main.js 里面引入store,注入到vue 实例里面

import store from '../路径'
new Vue({
  el: '#app',
  router,
  store,//不写这个的话，会报错，注入到这里主要是方便其他组件不用再单独引用
  components: { App },
  template: '<App/>'
})复制代码

2.bottom 组件上绑定显示隐藏，需要引入你的mapState(简便写法），把它写入计算属性里

import { mapState } from 'vuex' 
<Bottom v-show="showBottom" />
computed:mapState(['showBottom']),
复制代码

3.页面中控制显示隐藏

//引入方法 
import {mapMutations} from 'vuex'
methods:{
	...mapMutations(['hidBottom', 'showBottom'])
}
//生命周期里面使用
mounted() {
	    this.$store.commit('hidBottom')
	},
destroyed (){
	this.showBottom()
	}
复制代码

转载于:https://juejin.im/post/5d103df2e51d4555fc1accbe