vue状態共有Observable API
1562 ワード
コンポーネントの細分化に伴い、マルチコンポーネントの状態共有が発生する場合、
以下の例では、コンポーネントの外に
まずstoreを作成します.jsは、データおよび処理方法を指すためにそれぞれ使用される
store.jsコンテンツ
import Vue from 'vue';
export const store = Vue.observable({ count: 0 });
export const mutations = {
setCount(count) {
store.count = count;
}
}
vueコンテンツ
count:{{ count }}
+ 1
- 1
Vuexはもちろんこのような問題を解決することができるが、Vuexの公式ドキュメントで述べたように、アプリケーションが大きくなければ、コードの煩雑な冗長性を避けるために、それを使用しないほうがいい.今日紹介するのはvueである.js 2.6に新たに追加されたObservable APIは、このapiを使用することで、コンポーネント間のデータ状態の共有を簡単に行うことができます.以下の例では、コンポーネントの外に
storeを作成し、App.vueコンポーネントの中でstoreを使用する.jsが提供するstoreおよびmutationの方法は、他のコンポーネントと同様に使用して、複数のコンポーネントがデータ状態を共有することを実現することができる.まずstoreを作成します.jsは、データおよび処理方法を指すためにそれぞれ使用される
storeおよびmutationsを含む.store.jsコンテンツ
import Vue from 'vue';
export const store = Vue.observable({ count: 0 });
export const mutations = {
setCount(count) {
store.count = count;
}
}
vueコンテンツ
count:{{ count }}
+ 1
- 1
import { store, mutations } from "../utils/store";
export default {
name: "App",
computed: {
count() {
return store.count;
}
},
created() {
console.log(store.count);
},
methods: {
setCount(val) {
console.log(val, 'val');
mutations.setCount(val);
}
// setCount: mutations.setCount
}
};
参考:https://mp.weixin.qq.com/s/yqtPSvgXhjGxs0uOy4oGaQ