vue開發技巧——狀態共享
阿新 • • 發佈：2022-05-12
使用Vue進行開發時，隨著專案的複雜化，元件個數也逐漸增加，此時我們就面臨著一個問題——多元件狀態共享。當然有人會說使用Vuex來解決啊，但是如果此時我們的專案沒有那麼大那麼複雜，在使用Vuex會導致繁瑣冗餘
那該怎麼辦？其實我們還可以通過vue.js2.6版本新增的Observable API來解決這個問題。
示例
a) 建立一個 store.js，包含一個store和一個mutations，分別用來指向資料和處理方法。
| 1 2 3 4 5 6 7 |
import Vue fomr 'vue'
export const Vue.observable( obj: {count: 0 })export const mutations = {
steCount(count){
store.count = count
}
}
|
b) 在 App.vue裡面引入這個 store.js，使用引入的資料和方法。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template>
<div id="app">
<p>count:{{count}}</p>
<div @click="steCount(count+1)">+1</div>
<div @click="steCount(count-1)">-1</div>
</div>
<template>
<script>
import { store, mutations } from '/store/store';
export default {
name: "App",
computed: {
count（）{
return store.count;
}
},
methods:{
steCount:mutations.setCount
}
}
<script>
|