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 相关文章推荐
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
纯js代码生成可搜索选择下拉列表的实例
Jan 11 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
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
PHP实现验证码校验功能
2017/11/16 PHP
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
Nodejs之http的表单提交
2017/07/07 NodeJs
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
python实现录音小程序
2020/10/26 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python代码编写计算器小程序
2020/03/30 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Python单元测试与测试用例简析
2019/11/09 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
公务员年度考核评语
2014/12/31 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
企业工会工作总结2015
2015/05/13 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL