Vuex 教程案例：计数器以及列表展示

Posted 2020-10-26 axel10

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