In this case, github: https://github.com/axel10/Vuex_demo-Counter-and-list

In this tutorial, two examples, counter and list, are used to explain the simple use of Vuex.

The process from installation to starting the initial page is skipped directly. Note that routing is required during installation.

First, create a new store directory and corresponding files under the src directory. The structure is as follows:

index.js file content:

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

Vue.use(Vuex);    //Be sure to new Vuex.Store before use Once

export default new Vuex.Store({
  state:{
    count:0       //Counter count
  },
  mutations:{
    increment(state){
      state.count++
    }
  }
})

Create a new Num.vue component in the components folder, as follows

<template>
  <div>
    <input type="button" value="+" @click="incr" />
    <input type="text" id="input" v-model="count"/>
    <input type="button" value="-"/>
    <br/>
    <router-link to="/list">list demo</router-link>
  </div>
</template>

<script>
  import store from '../store'
  export default {

    computed:{
      count:{
        get:function () {
          return store.state.count
        },
        set:function (val) {
          store.state.count = val
        }
      }
    },

    methods:{
      incr(){
        // store.commit("increment")
        store.commit("increment")    //Trigger modification
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Configure routes in the router folder:

import Vue from 'vue'
import Router from 'vue-router'
import Num from '../components/Num'
import List from  '../components/List'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/num',
      component:Num
    },

    {
      path:"*",
      redirect:"/num"
    }
  ]
})

Start when finished, and you will see the results. Counter demonstration complete.

Now let's start the list presentation.

Create a new api folder in src directory, and then create a new api file.

api/cover.js:

const _cover = [
  {"id": 1, "title": "iPad 4 Mini", "price": 500.01, "inventory": 2},
  {"id": 2, "title": "H&M T-Shirt White", "price": 10.99, "inventory": 10},
  {"id": 3, "title": "Charli XCX - Sucker CD", "price": 19.99, "inventory": 5}
];


export default {
  getCover(cb) {
    setTimeout(() => cb(_cover), 100);
/*    $.get("/api/data",function (data) {
      console.log(data);
    })*/

  },
}

Modify store/modules/cover.js: (define data model)

import cover from '../../api/cover'

const state = {
  all:[]
};

const getters={
  allCover:state=>state.all   //getter Used to provide the provider
};

const actions = {
  getAllCover({commit}){
    cover.getCover(covers=>{
      commit('setCover',covers)       //trigger setCover Modification.
    })
  },
  removeCover({commit},cover){
    commit('removeCover',cover)
  }
};

const mutations = {   //mutations Used to modify state. 
  setCover(state,covers){
    state.all = covers
  },
  removeCover(state,cover){
    console.log(cover.id);
    state.all = state.all.filter(function (OCover) {
      return OCover.id !== cover.id
    })
  }
};

export default {
  state,getters,actions,mutations
}

Register the data model in index.js in the store:

import Vue from "vue"
import Vuex from 'vuex'
import cover from './modules/cover'

Vue.use(Vuex);    //Be sure to new Vuex.Store before use Once

export default new Vuex.Store({

  modules:{
    cover         //register cover data model
  },

  state:{
    count:0       //Counter count
  },
  mutations:{
    increment(state){
      state.count++
    }
  }
})

Create a new List.vue component in the components folder, as follows:

<template>
  <div class="list">
    <ul>
      <li v-for="cover in covers" @click="removeCover(cover)">
        {{cover.title}}
      </li>
    </ul>
    <p>
      {{covers}}
    </p>
    <h2>Please try clicking li. </h2>
    <router-link to="/num">Counter demo</router-link>

  </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex';

export default {
  computed:mapGetters({
    covers:"allCover"      //utilize module Of getter Get data
  }),

  methods:mapActions([
    'removeCover'       //utilize module Of action Delete data
  ]),

  created(){
    this.$store.dispatch('getAllCover')    //call cover Data model getAllCover action Used to initialize list data.
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list{
    text-align: left;
  }
</style>

Register new components in route:

import Vue from 'vue'
import Router from 'vue-router'
import Num from '../components/Num'
import List from  '../components/List'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/num',
      component:Num
    },
    {
      path:'/list',
      component:List
    },
    {
      path:"*",
      redirect:"/num"
    }
  ]
})

After completion, visit http://localhost:8080/#/list to see the results.