├── .browserslistrc
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── store
    │   ├── index.js
    │   └── modules
    │   │   └── users-module.js
    ├── router
    │   └── index.js
    ├── App.vue
    └── components
    │   ├── AddUser.vue
    │   └── Users.vue
├── .gitignore
├── database.json
├── .eslintrc.js
├── README.md
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SinghDigamber/vuex-state-management-app/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SinghDigamber/vuex-state-management-app/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | 
 6 | Vue.config.productionTip = false
 7 | 
 8 | new Vue({
 9 |   router,
10 |   store,
11 |   render: h => h(App)
12 | }).$mount('#app')
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | import UsersModule from '../store/modules/users-module'
 5 | 
 6 | Vue.use(Vuex)
 7 | 
 8 | export default new Vuex.Store({
 9 |   state: {
10 |   },
11 |   mutations: {
12 |   },
13 |   actions: {
14 |   },
15 |   modules: {
16 |     UsersModule
17 |   }
18 | })
19 | 


--------------------------------------------------------------------------------
/database.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "users": [
 3 |     {
 4 |       "id": 1,
 5 |       "name": "Leanne Graham",
 6 |       "email": "Sincere@april.biz"
 7 |     },
 8 |     {
 9 |       "id": 2,
10 |       "name": "Ervin Howell",
11 |       "email": "Shanna@melissa.tv"
12 |     },
13 |     {
14 |       "name": "John Doe",
15 |       "email": "john@gmail.com",
16 |       "id": 3
17 |     }
18 |   ]
19 | }


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | Vue.use(VueRouter)
 5 | 
 6 | const routes = [
 7 |   {
 8 |     path: '/',
 9 |     name: 'User',
10 |     component: () => import('../components/Users')
11 |   }
12 | ]
13 | 
14 | const router = new VueRouter({
15 |   mode: 'history',
16 |   base: process.env.BASE_URL,
17 |   routes
18 | })
19 | 
20 | export default router


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <AddUser />
 4 |     <Users />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import AddUser from '../src/components/AddUser'
10 | import Users from '../src/components/Users'
11 | 
12 | export default {
13 |   name: 'App',
14 |   components: {
15 |     AddUser,
16 |     Users
17 |   }
18 | }
19 | </script>
20 | 
21 | <style>
22 |   .container {
23 |     max-width: 500px;
24 |     padding-top: 50px;
25 |   }
26 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vuex-state-management-app
 2 | [Vue.js 2 + Vuex State Management Tutorial by Example](https://www.positronx.io/vue-js-vuex-state-management-tutorial-by-example/)
 3 | 
 4 | ## Project setup
 5 | ```
 6 | npm install
 7 | ```
 8 | 
 9 | ### Compiles and hot-reloads for development
10 | ```
11 | npm run serve
12 | ```
13 | 
14 | ### Compiles and minifies for production
15 | ```
16 | npm run build
17 | ```
18 | 
19 | ### Lints and fixes files
20 | ```
21 | npm run lint
22 | ```
23 | 
24 | ### Customize configuration
25 | See [Configuration Reference](https://cli.vuejs.org/config/).


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 9 |     <title><%= htmlWebpackPlugin.options.title %></title>
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 |     </noscript>
15 |     <div id="app"></div>
16 |     <!-- built files will be auto injected -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/components/AddUser.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  <form @submit.prevent="onUserSubmit">
 3 |   <div class="form-group">
 4 |     <input type="text" class="form-control" placeholder="Enter name" v-model="name">
 5 |   </div>
 6 |   <div class="form-group">
 7 |     <input type="text" class="form-control" placeholder="Enter email" v-model="email">
 8 |   </div>
 9 |   <button type="submit" class="btn btn-block btn-primary">Add</button>
10 | </form>
11 | </template>
12 | 
13 | <script>
14 | import { mapActions } from "vuex";
15 | 
16 | export default {
17 |   name: 'AddUser',
18 |   data(){
19 |       return {
20 |         name: '',
21 |         email: ''
22 |       }
23 |   },
24 |   methods:{
25 |     ...mapActions(["addUsers"]),
26 |     onUserSubmit() {
27 |         this.addUsers({
28 |           name: this.name,
29 |           email: this.email
30 |         })
31 |     }
32 |   }
33 | }
34 | </script>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuex-state-management-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.19.2",
12 |     "core-js": "^3.6.4",
13 |     "vue": "^2.6.11",
14 |     "vue-router": "^3.1.6",
15 |     "vuex": "^3.1.3"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "~4.3.0",
19 |     "@vue/cli-plugin-eslint": "~4.3.0",
20 |     "@vue/cli-plugin-router": "~4.3.0",
21 |     "@vue/cli-plugin-vuex": "~4.3.0",
22 |     "@vue/cli-service": "~4.3.0",
23 |     "babel-eslint": "^10.1.0",
24 |     "eslint": "^6.7.2",
25 |     "eslint-plugin-vue": "^6.2.2",
26 |     "sass": "^1.26.3",
27 |     "sass-loader": "^8.0.2",
28 |     "vue-template-compiler": "^2.6.11"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/Users.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul class="list-group mt-5">
 4 |       <li class="list-group-item list-group-item-action" v-for="user in usersList" :key="user.id">
 5 | 
 6 |         <div class="d-flex w-100 justify-content-between">
 7 |           <h3>{{user.name}}</h3>
 8 | 
 9 |           <small class="text-danger delete" @click="deleteUser(user.id)">&#10005;</small>
10 |         </div>
11 |         <p>{{user.email}}</p>
12 | 
13 |       </li>
14 |     </ul>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 |   import {
20 |     mapGetters,
21 |     mapActions
22 |   } from "vuex";
23 | 
24 |   export default {
25 |     name: 'Users',
26 |     methods: {
27 |       ...mapActions(["fetchUsers", "deleteUser"])
28 |     },
29 |     computed: mapGetters(["usersList"]),
30 |     created() {
31 |       this.fetchUsers()
32 |     }
33 |   }
34 | </script>
35 | 
36 | <style>
37 |  .delete {
38 |    font-size: 18px;
39 |    cursor: pointer;
40 |  }
41 | </style>


--------------------------------------------------------------------------------
/src/store/modules/users-module.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | const state = { 
 4 |     users: []
 5 | };
 6 | 
 7 | const getters = { 
 8 |     usersList: state => state.users
 9 | };
10 | 
11 | const actions = { 
12 |     async fetchUsers({commit}){
13 |       const response = await axios.get("http://localhost:3000/users");
14 |       commit("setUsers", response.data)
15 |     },
16 |     async addUsers({commit}, user){
17 |       const response = await axios.post("http://localhost:3000/users", user);
18 |       commit("addNewUser", response.data)
19 |     },
20 |     async deleteUser({commit}, id){
21 |       await axios.delete(`http://localhost:3000/users/${id}`);
22 |       commit("removeUser", id)
23 |     }
24 | };
25 | 
26 | const mutations = { 
27 |     setUsers: (state, users) => (
28 |         state.users = users
29 |     ),
30 |     addNewUser: (state, user) => state.users.unshift(user),
31 |     removeUser: (state, id) => (
32 |         state.users.filter(user => user.id !== id),
33 |         state.users.splice(user => user.id, 1)
34 |     )
35 | };
36 | 
37 | export default {
38 |     state,
39 |     getters,
40 |     actions,
41 |     mutations
42 | }


--------------------------------------------------------------------------------