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>
v-for="item in groceryList"
<button v-on:click="reverseMessage">Reverse Message</button>

Redux vs. Vuex

Dispatch and Commit

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

Getting data from the store

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


  • 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