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++
    }
  }
})

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，即可看到结果。