Vuex实现计数器以及列表展示效果

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

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

<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>

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

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

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}

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

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