Doing Vue after three years with React

Somewhere between React and Angular

<div id="app-3">
<span v-if="seen">Now you see me</span>
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>

Redux vs. Vuex

Dispatch and Commit

import { ADD_TODO, REMOVE_TODO } from '../actionTypes'function addTodo(text) {
return {
type: ADD_TODO,
text
}
}

Getting data from the store

const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
<template>
<div>
<todo-item :todo="todo"></todo-item>
</div>
</template>
<script>
import TodoItem from './TodoItem.vue'
export default {
components: {
TodoItem
},
data () {
return {
todo: {
text: 'Learn Vue',
isComplete: false
}
}
}
}
</script>
class TodoList extends React.Component {
render() {
<div>
<TodoItem todo={this.props.todo} />
</div>
}
}

Conclusion

  • Vue doesn’t come with JSX by default and is pretty strong with idea of separation of scripts and templates
  • Redux and Vuex have a similar idea of data flow behind them
  • Redux heavily relies on immutability of the state, while Vuex doesn’t care about state’s immutability
  • In Vue it’s possible to both dispatch and commit directly from the component, but it’s better to keep it more strict and allow dispatch only
  • Store is directly accessible inside every Vue component

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store