.sync
is deprecated in Vue 2.x (UPDATE: a castration edition is back in v2.3
)
Especially for the case that props
passed shallowly, you have to write more verbose code
The docs mentioned using v-model
as a hack which sounds hardly elegant
Also, the official solution Vuex
is not suitable for independent components
We all know one-way data flow is a best practice
but development efficiency, maintainability, simple and straight-forward should all be taken into consideration
After reviewing the below contents of the docs:
We can implement an awesome state management solution ourselves
Firstly, Take a look at src/sharedState.mixin.js
:
// The magic of state persistance is closure here
export const sharedState = {
todos: [],
counter: 0
}
export const resetTodos = () => sharedState.todos = []
export const resetCounter = () => sharedState.counter = 0
export const addTodo = (s) => sharedState.todos.push(s)
export const inc = () => sharedState.counter++
export const dec = () => sharedState.counter--
/**
* @exports.default {Mixin}
*/
export default {
data: () => ({
sharedState
}),
methods: {
resetTodos,
resetCounter,
addTodo,
inc,
dec
}
}
/*
You can access the shared state and methods
not only within Vue component (as mixins) but also in common js files
※ e.g.
import { sharedState, inc } from '<path to>/sharedState.mixin'
console.info(sharedState.counter) // 0
inc()
console.info(sharedState.counter) // 1
*/
Then, apply to the component tree below:
App
├─ Child1
| └─ Grandchild1
└─ Child2
└─ Grandchild2
Finally we get an online demo
It's highly suggested to dive into
src/
to learn about how to use it
This solution is applicable for Vue 1.x / 2.x
$ git clone https://github.com/kenberkeley/vue-state-management-alternative.git
$ cd vue-state-management-alternative
$ npm i
$ npm start