Vuex實現計數器以及列表展示效果，vuex實現計數器展示

Vuex實現計數器以及列表展示效果，vuex實現計數器展示

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

本案例github

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

首先，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，即可看到結果。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。