Vuex状態マネージャーはコンポーネント間の転送を実現します
小道具、放出、その他の方法に加えて、コンポーネント間の伝送もvuexを通過できます。Vuexは一般に大規模および中規模のプロジェクトに適しています。小道具、放出、その他の方法に加えて、小規模なプロジェクトの場合は、また、vuexを通過することもできます。Vuexは、一般的に、小規模なプロジェクト、小道具、E M I T他のパーティの方法の外、また、缶に渡すを介してV U E X給電ライン転送送達、V U E X 、一般的に適し使用における大で型アイテムプロジェクト、などの場合は小項目プロジェクトがありますその後、P R＆LT Oのような方法P 、等EMITは、そうでなければプロジェクトが煩雑に表示され、十分です。
//向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;