Vuex state manager realizes the transfer between components
In addition to props, emit and other methods, the transmission between components can also be passed through vuex. Vuex is generally suitable for large and medium-sized projects. If it is a small project, in addition to prop, emit and other methods, it can also be passed through vuex. Vuex generally Suitable for large and medium-sized projects, if it is a small project, prop,E m I T other party method of an outer , also can to pass through the V U E X feed line transfer delivery , V U E X a generally suitable for use in Great in type Item project , such as if a small item project is then P R & lt O Methods such as p , emit, etc. are sufficient, otherwise the project will appear cumbersome.
//向storage中存储数据
this.$store.commit("setIHeight", document.documentElement.clientHeight);
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
keepAlive: ['index'], //路由缓存数组，存储每个页面的name
iHeight: 0, //整体高度
iWidth: 0, //整体宽度
orgmanager1:""
},
mutations: {
setKeepAlive: (state, keepAlive) => {
state.keepAlive = keepAlive
},
addKeepAlive: (state, name) => {
var k = state.keepAlive.indexOf(name);
if (k == -1) {
state.keepAlive.push(name);
}
},
removeKeepAlive: (state, name) => {
var k = state.keepAlive.indexOf(name);
if (k > -1) {
state.keepAlive.splice(k, 1);
}
},
setIHeight: (state, value) => {
state.iHeight = value;
},
setIWidth: (state, value) => {
state.iWidth = value;
},
orgmanager1: (state, value) => {
state.orgmanager1 = value;
},
},
getters: {
keepAlive: state => state.keepAlive,
iHeight: state => state.iHeight,
iWidth: state => state.iWidth,
}
})
//获取storage数据的方法
1.
export default {
name: 'App',
computed: {
//缓存的保持状态数组 store
keepAlive() {
return this.$store.getters.keepAlive;
},
iHeight: {
get: function() {
return this.$store.getters.iHeight;
},
set: function() {
}
},
iWidth: {
get: function() {
return this.$store.getters.iWidth;
},
set: function() {
}
}
},
2.可直接用v-model做双向数据绑定
<input v-model="$store.state.orgmanager1" @click="open(1)" />
3.
const p = this.$store.state.orgmanager1;