Vuex 教程案例：計數器以及列表展示

 本案例github：https://github.com/axel10/Vuex_demo-Counter-and-list

本篇教程將以計數器及列表展示兩個例子來講解Vuex的簡單用法。

從安裝到啟動初始頁面的過程都直接跳過。註意安裝時選擇需要路由。

首先，src目錄下新建store目錄及相應文件，結構如下：

index.js文件內容：

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

Vue.use(Vuex);    //務必在new Vuex.Store之前use一下

export default new Vuex.Store({
  state:{
    count:0       //計數器的count
  },
  mutations:{
    increment(state){
      state.count++
    }
  }
})

src下的main.js里註冊store

new Vue({
  el: '#app',
  router,
  store,        //註冊store
  components: { App },
  template: '<App/>'
});

components文件夾內新建Num.vue組件，內容如下

<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">列表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")    //觸發修改
      }
    }
  }
</script>

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

</style>

router文件夾內配置路由：

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"
    }
  ]
})

完成後啟動，即可看到結果。計數器演示完成。

現在開始列表演示。

src目錄下新建api文件夾，再新建api文件。

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);
    })*/

  },
}

修改store/modules/cover.js：（定義數據模型。數據模型包含了數據以及對該數據的修改操作。）

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

const state = {
  all:[]
};

const getters={
  allCover:state=>state.all   //getter用來提供訪問介面
};

const actions = {
  getAllCover({commit}){
    cover.getCover(covers=>{
      commit('setCover',covers)       //觸發setCover修改。
    })
  },
  removeCover({commit},cover){
    commit('removeCover',cover)
  }
};

const mutations = {   //mutations用來修改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
}

store內的index.js中註冊數據模型：

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

Vue.use(Vuex);    //務必在new Vuex.Store之前use一下

export default new Vuex.Store({

  modules:{
    cover         //註冊cover數據模型
  },

  state:{
    count:0       //計數器的count
  },
  mutations:{
    increment(state){
      state.count++
    }
  }
})

components文件夾內新建List.vue組件，內容如下：

<template>
  <div class="list">
    <ul>
      <li v-for="cover in covers" @click="removeCover(cover)">
        {{cover.title}}
      </li>
    </ul>
    <p>
      {{covers}}
    </p>
    <h2>請嘗試點擊li。</h2>
    <router-link to="/num">計數器demo</router-link>

  </div>
</template>

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

export default {
  computed:mapGetters({
    covers:"allCover"      //利用module的getter獲得數據
  }),

  methods:mapActions([
    'removeCover'       //利用module的action刪除數據
  ]),

  created(){
    this.$store.dispatch('getAllCover')    //調用cover數據模型的getAllCover action 用來初始化列表數據。
  }
}
</script>

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

路由中註冊新組件：

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"
    }
  ]
})

完成後訪問http://localhost:8080/#/list，即可看到結果。