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


Posted in Javascript onMarch 10, 2018

 本篇教程将以计数器及列表展示两个例子来讲解Vuex的简单用法。

本案例github

从安装到启动初始页面的过程都直接跳过。注意安装时选择需要路由。

首先,src目录下新建store目录及相应文件,结构如下:

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

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文件。

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 #Javascript
redux-saga 初识和使用
Mar 10 #Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 #Javascript
vue获取当前点击的元素并传值的实例
Mar 09 #Javascript
vue.js获得当前元素的文字信息方法
Mar 09 #Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 #Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 #jQuery
You might like
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python松散正则表达式用法分析
2016/04/29 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
护士的岗位职责
2013/12/04 职场文书
学校七一活动方案
2014/01/19 职场文书
高中毕业自我评价
2014/02/08 职场文书
购房委托书范本
2014/09/18 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
基于Python实现将列表数据生成折线图
2022/03/23 Python