vuex 的基本使用
工程目录
主要关注store 文件夹下的文件
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
// import getters from './store/getters.js'
// import actions from './store/actions.js'
// import mutations from './store/mutations.js'
import types from './types' // children module
import users from './modules/users.js' Vue.use(Vuex) const state = {
count: 1
} const mutations = {
[types.INCREMENT]: (state, n) => {
state.count = state.count + n
},
[types.DECREMENT]: (state, n) => {
state.count = state.count - n
}
} const actions = {
increment: (context, n = 1) => {
context.commit(types.INCREMENT, n)
},
decrement: (context, commit, n = 1) => {
context.commit(types.DECREMENT, n)
}
} export default new Vuex.Store({
state,
mutations,
actions,
modules: {
users
}
})
store/modules/users.js
import types from '../types' const state = {
username: 'xiaojf'
} const mutations = {
[types.CHANGEUSERNAME]: (state, username) => {
state.username = username
}
} const actions = {
changeUsername (context, username = 'zhangsan') {
context.commit(types.CHANGEUSERNAME, username)
}
} export default {
state,
mutations,
actions
}
/components/test.vue
<template>
<div>
<div class="test">{{name}}</div>
<div class="test">{{this.$store.state.count}}</div>
<button v-on:click="increment()">increment</button>
<button v-on:click="decrement()">decrement</button> <br>
this is users module state <span style="color: red;" v-on:click="changeUsername()"> {{this.$store.state.users.username}}</span> <br>
<test2></test2>
</div>
</template> <script>
import test2 from './test2' export default {
name: 'test',
data: function () {
return {
name: 'xiaojf'
}
},
components: {
test2
},
methods: {
increment () {
// mutation
this.$store.dispatch('increment', 1)
},
decrement () {
// action
this.$store.dispatch('decrement', 2)
},
changeUsername () {
// children module's action
this.$store.dispatch('changeUsername', 'xiaojianfeng')
}
}
}
</script> <style scoped>
.test {
font-size: 28px;
color: red;
}
</style>
/components/test.vue
<template>
<div>
this is test2 {{this.$store.state.count}}
</div>
</template> <script>
export default {
name: 'test2',
data: function () {
return {
name: 'xiaojf'
}
}
}
</script>
vuex 的基本使用的更多相关文章
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- vuex复习方案
这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.
- vuex 初体验
vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...
- vuex(1.0版本写法)
Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/ 2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...
- 关于Vue vuex vux 文档
01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex ----->>状态管理模块儿<<------- https://vuex.vue ...
- vuex
英文:(Introduction)中文:https://github.com/vuejs/vuex/issues/176(贡献者努力中)
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- Vue2.X的状态管理vuex记录
记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method -- ...
- 在vue1.0遇到vuex和v-model的坑
事情是这样的,在开发项目的过程中我使用了vuex并且在store中定义了一个保存用户信息的对象 userInfo : { 'nickName' : '', // 昵称 'password' :'', ...
- vuex 笔记
Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...
随机推荐
- IntelliJ IDEA自身以及maven项目打包方式
1. Idea自身打包方式 1.1 创建Artifacts 快捷键(Ctrl+Alt+Shift+S)打开项目的Project Structure.在Artifacts创建 接着,指定main cla ...
- Python编写的ssh客户端[类似putty]
转载请注明出处:http://blog.csdn.net/jmppok/article/details/17588381 windows下可以通过putty以ssh方式连接linux主机.但putty ...
- SSM框架--Spring+SpringMVC+Mybatis (IDEA)搭建
使用idea创建一个maven项目( 这里演示 的是 web项目) 点击 Finish 然后开始配置 pom.xml文件(添加各种依赖jar包) 先去找 spring 所需的 jar包 jar包中心仓 ...
- junit4的初级用法
junit4初级用法: 一:各个标签的意思 1.@Test用来标注测试函数 2.@Before用来标注此函数在每次测试函数运行之前运行(每执行一个@Test之前都要运行一遍@Before) 3.@Af ...
- [Dynamic Programming] 198. House Robber
You are a professional robber planning to rob houses along a street. Each house has a certain amount ...
- 查看.NET应用程序中的异常(上)
内存转储是查明托管.NET应用程序中异常的原因的一种极好的方法,特别是在生产应用程序中发生异常时.当您在无法使用Visual Studio的应用程序中跟踪异常时,cdb和sos.dll的使用技术就变成 ...
- dinoql 支持自定义resovler了
dinoql 当前版本0.4.0 支持自定义reovler 了,使用也比较简单 环境准备 初始化 yarn init -y 添加依赖 yarn add dinoql graphql-tag packa ...
- 虚拟变量和独热编码的区别(Difference of Dummy Variable & One Hot Encoding)
在<定量变量和定性变量的转换(Transform of Quantitative & Qualitative Variables)>一文中,我们可以看到虚拟变量(Dummy Var ...
- SQL基础-约束&索引
一.约束 1.约束简介 约束(constraint): 表中数据的限制条件. 完整性 有效性 约束的种类: 主键约束 外键约束 唯一约束 检查约束 非空约束 2.主键约束 主键约束: 唯一标识表中每一 ...
- QML学习(二)——<QML语法>
一.Qml类型 QML类型分为三类:基本类型.QML对象类型以及JavaScript类型 1 基本类型 我们可以再qt帮助文档中搜索基本类型查看 基本类型的概念是相对于QML对象类型而言的,QML 对 ...