O gerente de estado da Vuex realiza a transferência entre componentes
Além de props, emit e outros métodos, a transmissão entre componentes também pode ser passada por vuex. Vuex é geralmente adequado para projetos de grande e médio porte. Se for um projeto pequeno, além de prop, emit e outros métodos, também pode ser passado por vuex. Vuex geralmente Adequado para projetos de grande e médio porte, se for um projeto pequeno, prop,E m eu t outra parte método de uma camada exterior , também pode para passar através da V L E X alimentação linha de transferência entrega , V L E X um modo geral adequado para utilização em grande no tipo do item projecto , tais como , se uma pequena produto projecto é então Métodos P R & lt O como p , emit, etc. são suficientes, caso contrário o projeto parecerá complicado.
//向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;