vuex的基础用法

1、一般用法

//store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		isWork:true,// 判断是否已经上班打卡了。
		isShowUnderway:false,//注塑工序是否显示正在进行的工序
	},
	mutations: {// 方法
		// 改变上班状态
		changeWorkState(state, changestate){
			state.isWork = changestate
		},
		// 改变是否显示正在进行的表格组件的显示
		orderUnderway(state, isUnderway){
			state.isShowUnderway = isUnderway
		}
	},


//vue页面
isSwitchConduct(){
        //               mutations定义的方法名          参数
	this.$store.commit("orderUnderway",!this.$store.state.isShowUnderway) // 执行vuex的state的方法,改变状态(方法名,参数)
	console.log(this.$store.state.isShowUnderway) // 查看vuex的state的状态
},

2、有子文件的用法

如果是想修改子文件的值,如下图:

则修改方式为

// 存
this.$store.commit("global/setFullscreen",true)//global为文件名,setFullscreen为`mutations`里面的方法名
//或者(引入store的情况下)
store.commit("global/setFullscreen",true)

 //取
`this.$store.state.global.isShowUnderway`
posted @ 2021-07-13 15:58  seekHelp  阅读(70)  评论(0编辑  收藏  举报