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

});

components文件夹内新建Num.vue组件，内容如下

列表demo

router文件夹内配置路由：

import Vue from 'vue'

import Router from 'vue-router'

import Num from '../components/Num'

import List from '../components/List'

http://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组件，内容如下：

{{cover.title}}

{{covers}}

计数器demo

路由中注册新组件：

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。