vuejs-vuex-for-dummies

A Vue.js app with Vuex: a centralized state manager for Vue

Introduction

This repository is an example of web application developed using Vue.js that integrates Vuex: a state management pattern library for Vue.js applications.

If you are new to Vue's world or if you want to understand Vuex's concepts, this repository is for you. 😃

Getting Started

Prerequisites

You must have Npm or Yarn installed on your machine.

This project was generated with the Vue CLI. If you want to develop you personal project with Vue, install the Vue CLI

Installing

Clone the repository using Git:

git clone https://github.com/dj0nny/vuejs-state-management-for-beginners.git

Or download the repository here

---

Run

npm run install
# OR
yarn install

for installing the dependencies. At the end type

npm run serve
# OR
yarn serve

for running the application.

Deploying

You can create a optimized build version of this repository running:

npm run build
# OR
yarn build

Or you can see a deployed version on Netlify at this URL: https://fervent-brown-eb1282.netlify.com/#/

Setup Vuex

Classic Mode

All Vuex's configurations are inside the store.js file.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  }
})

Namespaced Modules

Every .js file inside the store directory is transformed as a namespaced module (index being the root module).

index.js

import Vue from 'vue'
import Vuex from 'vuex'

import todos from './modules/todos'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    todos
  },
  strict: true // strict mode prevents the state changing outside the Vuex store
})

store/todo.js

export default {
  state: {
    todos: [
      {
        name: 'Learn Vue',
        done: true
      },
      {
        name: 'Learn Vuex',
        done: true
      },
      {
        name: 'Chill with Vuex',
        done: false
      },
      {
        name: 'Improve the knowledge of Vuex',
        done: false
      },
      {
        name: 'Chill with Vuex again',
        done: false
      }
    ]
  },

  getters: {
    getNumberTodos(state) {
      return state.todos.length
    },
    getNumberDoneTodos(state) {
      return state.todos.filter((todos) => todos.done == true).length
    },
    getNumberUndoneTodos(state) {
      return state.todos.filter((todos) => todos.done == false).length
    }
  },

  mutations: {
    mutate_todo_done(state, payload) {
      state.todos[payload].done = !state.todos[payload].done
    },
    mutate_with_new_todo(state, payload) {
      state.todos.push(payload)
    }
  },

  actions: {
    changeDone({ commit }, index) {
      commit('mutate_todo_done', index)
    },
    addNewTodo({ commit }, newTodo) {
      commit('mutate_with_new_todo', newTodo)
    }
  }
}

Terminology

• State: this object contains all the application states, in this case our state is the array of objects todos.
• Getters: they are derived state based on store state, like the getNumberTodos() function that compute the current numeber of todos in the array.
• Mutations: are functions for changing states' values. For example the mutation mutate_todo_done change the value of the field done inside the state.
• Actions: they are similar to mutations but instead of mutating the state, actions trigger mutations, like the changeDone that commits the mutate_todo_done passing the index number of the todo.

Next version

• Generate the project
• Setup Vuex with namespaced mode
• Add aditional packages
• Add todo.js module
• Add state
• Add getters
• Add mutations
• Add actions
• Add page and components Todo
• API
• Fetch remote data from API
• Add them to the store
• Add state
• Add getters
• Add mutations
• Add actions

Built with ❤ using:

• Vue.js - A Javascript framework
• Vuex - A state management pattern library for Vue.js applications
• Bootstrap Vue - Bootstrap components for Vue.js

Contributing

Pull Requests for adding features ⇄ and ★ are welcome