Vuex最基本样例
通过vue-cli建立基本脚手架(需要安装vuex),需要新建一个store.js文件。基本目录如下
1,store.js文件代码:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) const state = {
count: 5
} const mutations = {
add(state){
state.count += 1
},
reduce(state){
state.count -= 1
}
}
export default new Vuex.Store({
state,
mutations
})
2,App.vue代码:
<template>
<div id="app">
<p>hello vuex</p>
<p>{{$store.state.count}}</p>
<button @click = "$store.commit('add')">+</button>
<button @click = "$store.commit('reduce')">-</button>
</div>
</template> <script>
export default {
name: 'App'
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
3,入口文件main.js代码:
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
运行结果为:
默认显示为数字5,点击+或者-,执行相应的加减操作。
Vuex最基本样例的更多相关文章
- C++的性能C#的产能?! - .Net Native 系列《三》:.NET Native部署测试方案及样例
之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...
- MarkDown+LaTex 数学内容编辑样例收集
$\color{green}{MarkDown+LaTex 数学内容编辑样例收集}$ 1.大小标题的居中,大小,颜色 [例1] $\color{Blue}{一元二次方程根的分布}$ $\color{R ...
- 33个超级有用必须要收藏的PHP代码样例
作为一个正常的程序员,会好几种语言是十分正常的,相信大部分程序员也都会编写几句PHP程序,如果是WEB程序员,PHP一定是必备的,即使你没用开发过大型软件项目,也一定多少了解它的语法. 在PHP的流行 ...
- 关于peersim样例配置文件的超详细解读(新手勿喷)
相信很多兄弟一开始接触peersim,对配置文件还是有点不适应,我看了好久的样例的配置文件,一层层去找对应的文件的方法,终于好像悟懂了一点,记下来以后回顾. 贴上代码,一点点分析. 首先要说下所谓的配 ...
- hdu 1003 MAX SUM 简单的dp,测试样例之间输出空行
测试样例之间输出空行,if(t>0) cout<<endl; 这样出最后一组测试样例之外,其它么每组测试样例之后都会输出一个空行. dp[i]表示以a[i]结尾的最大值,则:dp[i ...
- CloudSim样例分析
自带八个样例描述: cloudsim-2.1.1\examples目录下提供了一些CloudSim样例程序,每个样例模拟的环境如下: (1)CloudSimExample1.Java:创建一个一台主机 ...
- 样例20-汽车SHOW
观看样例点这里 素材下载 1.设置场景大小为400*3002.执行:文件->导入->导入到库,选择需要的汽车图片文件,将其导入到库面板中3.按照同样的方式,在库面板中导入所需的背景音乐文件 ...
- java使用xsd校验xml样例
知识点:XSD文件是指XML结构定义 ( XML Schemas Definition )文件,是DTD的替代品.可以用一个指定的XML Schema来验证某个XML文档,以检查该XML文档是否符合其 ...
- java servlet 代码样例 (demo)
今天又搞了下jsp +servlet 的代码样例,感觉虽然搭了好多次,可是每次还是不记得那些参数,都要去网上搜索,索性自己把这次的简单demo给记录下来,供下次使用的时候直接复制吧. 这个web逻辑 ...
随机推荐
- Linux上安装rz和sz命令
简介 lrzsz 官网入口:http://freecode.com/projects/lrzsz/ lrzsz是一个unix通信套件提供的X,Y,和ZModem文件传输协议 windows 需要向ce ...
- 解决MySQL ERROR 1130 (HY000): Host '192.168.31.115' is not allowed to connect to this MariaDB server
# 给root用户授权 GRANT ALL PRIVILEGES ON *.* TO 'root'@'192.168.31.115' IDENTIFIED BY 'root' WITH GRANT O ...
- SpringBean 定义继承
Bean定义继承 bean定义可以包含很多的配置信息,包括构造函数的参数,属性值,容器的具体信息例如初始化方法,静态工厂方法名,等等.子bean的定义继承副定义的配置数据.子定义可以根据需要重写一些值 ...
- mysql联合其他表做更新
在sql server中,我们可是使用以下update语句对表进行更新: update a set a.xx= (select yy from b) where a.id = b.id ; 但是在my ...
- 005-maven坐标和依赖
1.何为Maven坐标 groupId.artifactId.version.packaging.classifier 中央仓库:http://repol.maven.org/maven22.坐标详解 ...
- kettle中的karaf设置
Spoon.sh设置-Dpentaho.karaf.root.copy.dest.folder=$PENTAHO_KARAF_ROOT -Dpentaho.karaf.root.transient=f ...
- Guid ToString 格式知多少?
在日常编程中,Guid是比较常用的,最常见的使用就是如下所示: string id = Guid.NewGuid().ToString(); 这条语句会生成一个新的Guid并转成字符串,如下: // ...
- 【JXL】导出Excel
基本设置 // File file = new File("d:\\writetest.xlsx");// WritableWorkbook wwb = Workbook.crea ...
- idea的junit测试出现Class not found: "com.chinaums.szm.test.RouteTransProxyClientTest" Empty test suite.
- windows安装oracle client 18c 和plsql工具
安装须知: (1)安装平台选择.linux/windows (2)软件位数选择.32/64,如果你的plsql工具是32位,那么你就安装32位客户端,如果是64位,你就安装64位客户端. 安装过程: ...