大型项目中的数据状态会比较复杂,一般都会使用 vuex
来管理。但在一些小型项目或状态简单的项目中,为了管理几个状态而引入一个库,显得有些笨重。
在 2.6.0+ 版本中,新增的 Vue.observable
可以帮助我们解决这个尴尬的问题,它能让一个对象变成响应式数据:
// store.js
import Vue from 'vue'
export const state = Vue.observable({
count: 0
})
使用:
<div @click="setCount">{{ count }}</div>
import {state} from '../store.js'
export default {
computed: {
count() {
return state.count
}
},
methods: {
setCount() {
state.count++
}
}
}
然你也可以自定义 mutation
来复用更改状态的方法:
// store.js
import Vue from 'vue'
export const state = Vue.observable({
count: 0
})
export const mutations = {
SET_COUNT(payload) {
if (payload > 0) {
state.count = payload
}
}
}
使用:
import {state, mutations} from '../store.js'
export default {
computed: {
count() {
return state.count
}
},
methods: {
setCount() {
mutations.SET_COUNT(100)
}
}
}