Одно дело, когда мы используем Redux для React'a, так как в последнем в руте у нас просто компонент, который свои состояния посылает в другие компоненты через props.
Зачем использовать Vuex, если у нас и так есть централизованное хранилище в виде data в рутовом экземпляре.
Мне кажется, что Эван Ю (создатель Vue) с самого начала реализовал архитектуру Vue таким образом, чтобы у нас было общее хранилище для всех компонентов приложения.
Что скажете по этому поводу?
Еще я не понимаю, что за шум вокруг мутабельности/иммутабельности, зачем все это? Если мне нужно изменить состояние, то я просто его меняю так:
this.$root.$data.users.push({
name: this.name,
age: this.age
})
Вот пример о том, что я говорю.
main.js:
import Vue from 'vue'
import data from './store.js'
import App from './App.vue';
var app = new Vue({
components: { App },
el: '#app',
data,
template: `
<div>
<app></app>
</div>
`
});
store.js:
export default {
users: [
{ name: 'Sowyer', age: 23 },
{ name: 'Ramona', age: 45 },
]
};
А вот vue компонент, где мы работаем с users:
<script>
export default {
name: 'todo',
data () {
return {
name: '',
age: null
}
},
methods: {
createTodo() {
this.$root.$data.users.push({
name: this.name,
age: this.age
})
}
}
}
</script>
<template>
<div>
<form>
<input type="text" v-model="name">
<input type="number" v-model="age">
<button v-on:click.prevent="createTodo">Add user</button>
</form>
<ul>
<li v-for="user in this.$root.$data.users">
<p>{{user.name}} - {{user.age}}</p>
</li>
</ul>
</div>
</template>
Средний
