Vuex demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title> </head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<div id="app">
<p>{{count}}
<button @click="inc">+</button>
<button @click="dec">-</button>
</p>
</div>
<script> const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
inc: state => state.count++,
dec: state => state.count--
}
}) const app = new Vue({
el: '#app',
computed: {
count () {
return store.state.count
}
},
methods: {
inc () {
store.commit('inc')
},
dec () {
store.commit('dec')
}
}
})
</script> </body>
</html>
Vuex demo的更多相关文章
- vuex状态管理demo
vuex状态管理主要包含四个概念 mapState,mapMutations,mapGetters,mapActions. 编写vuex文件夹下面的store.js import Vue from ...
- Vuex2.0+Vue2.0构建备忘录应用实践
一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...
- Vue Ssr之旅 —— Nuxt
Nuxt 官方网站:https://nuxtjs.org/ 官方脚手架工具 Create-nuxt-app: https://github.com/nuxt-community/create-nuxt ...
- 一个demo 理解 vuex
相比接触vue的同学们已经看了官方文档了.这里我用一个简单的demo来阐述下vuex的知识点,虽然简单,但是容易理解.也加深自己的记忆. 用脚手架建立个项目vue init webpakc-simpl ...
- vue vuex 大型项目demo示例
1.vuex 动态模块配置 import Vue from 'vue' import Vuex from 'vuex' import store from '@/store'; // 使用Vuex插件 ...
- vuecli脚手架+vue+vuex实现vue驱动的demo。
哎呀呀呀,现在大家都要会Vue || React,否则感觉跟这个前端的世界脱节了一样. start: vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-de ...
- vuex的小demo
效果图: vue的app.vue <template> <div> <p>click {{count}} times,count is {{evenOrOdd}}& ...
- vuex 精简demo解析
1.store/index.js 文件 import Vue from 'vue' import Vuex from 'vuex' //使用vuex Vue.use(Vuex); //一个store ...
- vue-cli下的vuex的极简Demo（实现加1减1操作）
1.vue-cli搭建好项目之后,使用npm安装vuex npm install vuex --save 2.在项目目录中构建vuex目录(这里我新建了store的文件夹,里面新建了store.js文 ...
随机推荐
- 【CTSC2010】产品销售（bzoj1920）
数据结构优化网络流…… 重新定义一下题目的各种条件: 第 $i$ 天能生产 $a_i$ 个物品: 第 $i$ 天有 $b_i$ 个物品的需求: 每存储一天物品(把订单提前一天)需要 $c_i$ 的花费 ...
- [暑假集训--数位dp]LightOj1205 Palindromic Numbers
A palindromic number or numeral palindrome is a 'symmetrical' number like 16461 that remains the sam ...
- php 爬取网页列表 QueryList
主流的方式是 phpQuery 今天使用了 QueryList,是在PHPQuery的基础上进行了封装,现在最新的版本是4.0,但是要求PHP>7.0.就用了旧版的3.0 3.0文档:https ...
- social-auth-app-django模块
一 原文地址:http://www.cnblogs.com/adc8868/p/7665864.html social-auth-app-django模块是专门用于Django的第三方登录OAuth2 ...
- MySQL的@与@@区别
MySQL的@与@@区别 @x 是 用户自定义的变量 (User variables are written as @var_name) @@x 是 global或session变量 (@@glo ...
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---0
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下: <Linux命令行与shell脚本 ...
- 标准C程序设计七---35
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- Delphi 之Copyrect的使用
http://cqujsjcyj.iteye.com/blog/380970 Copyrect的使用(图片复制.放大.以及做图片放大镜等)一.从一个选取一个区域中的图象到另一个图象组件中的固定区域pr ...
- 转---派遣例程与IRP结构
派遣例程与IRP结构 文章出处:http://www.cnblogs.com/zmlctt/p/3978124.html#commentform 提到派遣例程,必须理解IRP(I/O Requ ...
- vs-插件+配置
{ "window.zoomLevel": 0, "files.autoSave": "off", "editor.fontSiz ...