本篇教程将以计数器及列表展示两个例子来讲解Vuex的简单用法。
本案例nofollow" target="_blank" href="https://github.com/axel10/Vuex_demo-Counter-and-list">github
从安装到启动初始页面的过程都直接跳过。注意安装时选择需要路由。
首先，src目录下新建store目录及相应文件，结构如下：
export default new Vuex.Store({
state:{
count:0 //计数器的count
},mutations:{
increment(state){
state.count++
}
}
})
src下的main.js里注册store
components文件夹内新建Num.vue组件，内容如下
router文件夹内配置路由：
export default new Router({
routes: [
{
path:'/num',component:Num
},{
path:"*",redirect:"/num"
}
]
})
完成后启动，即可看到结果。计数器演示完成。
现在开始列表演示。
api/cover.js：
getCover(cb) {
setTimeout(() => cb(_cover),100);
/ $.get("/api/data",function (data) {
console.log(data);
})/
},}
修改store/modules/cover.js：（定义数据模型）
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中注册数据模型：
export default new Vuex.Store({
modules:{
cover //注册cover数据模型
},state:{
count:0 //计数器的count
},mutations:{
increment(state){
state.count++
}
}
})
components文件夹内新建List.vue组件，内容如下：
{{covers}}
请尝试点击li。
路由中注册新组件：
export default new Router({
routes: [
{
path:'/num',{
path:'/list',component:List
},redirect:"/num"
}
]
})
完成后访问http://localhost:8080/#/list，即可看到结果。