本篇教程将以计数器及列表展示两个例子来讲解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: ''

});

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

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") //触发修改

}

}

}

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

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 用来初始化列表数据。

}

}

.list{

text-align: left;

}

路由中注册新组件：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。