Vuex实现数据控制

最新推荐文章于 2023-12-09 11:30:47 发布

叶落枫停

最新推荐文章于 2023-12-09 11:30:47 发布

阅读量225

点赞数

分类专栏： Vue 文章标签： js vue

本文链接：https://blog.csdn.net/qq_42463161/article/details/103875752

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在使用vue做按钮控制时，有时候需要记住按钮函数的执行状态，考虑之下使用vuex实现。

思路

1、使用v-show控制按钮显隐
2、使用计算函数控制
3、按钮点击事件传值
4、state里接收值

代码实现

//页面
<button class="pull connectBtn" @click="Connect" v-show="!isConnect">连接</button>
<button class="pull breakBtn" @click="breakOff" v-show="isConnect">断开</button>

//计算函数
computed:{
  	isConnect(){
    	return this.$store.state.isConnect
    }
},
//点击事件
methods:{
	Connect:function () {
		this.$store.commit('setIsConnect', true);
	},
	breakOff:function () {
        this.$store.commit('setIsConnect', false);
    },
}

store

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state={
	isConnect:false,
};
const getters = {
};
const mutations = {
//处理通过commit传过来的值
	setIsConnect(state,status){
	        state.isConnect = status;
	}
};
const store = new Vuex.Store(
    {state,getters,mutations,actions}
);

export default store;