文档章节

(旺财记账项目)Vue 全局数据管理(下)之Vuex

ories
 ories
发布于 02/26 13:13
字数 338
阅读 115
收藏 0

1. Vuex 就是一个数据读写工具

2. 引用了之后就可以读

3. 大概使用方法

const store = new Vuex.Store({
  state: { // data,也就是数据
    count: 0
  },
  mutations: {
    increment(state, n: number) { // methods,也就是对数据的改动
      state.count += n
    }
  }
})

console.log(store.state.count) // 0

// store.mutations.increment(store.state),这个封装成了commit
store.commit('increment',10) // +1 commit 就是调用api
// 函数名叫type, 参数叫payload
console.log(store.state.count) // 1

export default store;

4. 单一状态树的意思

  • 就是一个对象,应用层级状态就是所有组件的数据

5. Vue.use(Vuex)做了一些什么

  • 把 store 绑到 Vue.prototype.$store上,也就是初始化的时候 Vue.prototype.$store = store

6. Vuex,在.vue 文件中实现+1 的两种方法

  • 方法一
  <button @click = "add">+1</button>

  add(){
    store.commit('increment',1)
  }
  • 方法二
  <button @click = "$store.commit('increment',2)">+1</button>

7. Vuex 如何进行读和写

  • 读的时候用 computed
  • 写的时候配合 commit

8. action 就是异步的调用 method

Vuex.png

9. 在 ts 中使用 mixin

https://class-component.vuejs.org/guide/extend-and-mixins.html#mixins

10. 重构 EditLabel.vue

  • store.commit 没有返回值

11. Vuex使用套路

Vuex使用.png

最后,个人微信,欢迎交流!

wechat0.jpg

本文由博客一文多发平台 OpenWrite 发布!

© 著作权归作者所有

ories
粉丝 0
博文 26
码字总数 17394
作品 0
青浦
高级程序员
私信 提问
加载中

评论(0)

Vue秩序白银 —构建自己的Vuex

代码 原文 1. Vuex实战 上次文章介绍了Vue组件化之间通信的各种姿势,其中vuex基本算是终极解决方案了,这个没啥说的,直接贴代码把 所谓各大框架的数据管理框架,原则上来说,就是独立团大了...

蜗牛老湿
2019/03/21
0
0
vuex实现路由切换动画同时嵌套路由同样使用

示例 http://47.94.90.89/dist/#/aaa 一、安装vue-cli 1 下载安装node.js 2 npm install -g cnpm --registry=https://registry.npm.taobao.org 换源 3 cnpm install -g vue-cli 全局安装vue......

任倩坤
2018/05/18
0
0
手把手教你搞定权限管理,结合Vue实现菜单的动态权限控制!

SpringBoot实战电商项目mall(30k+star)地址:github.com/macrozheng/… 摘要 权限管理在后端项目中主要体现在对接口访问权限的控制,在前端项目中主要体现在对菜单访问权限的控制。在《手把...

MacroZheng
02/28
0
0
Vue进阶(五):与 Vuex 的第一次接触

Vue进阶(五):与 Vuex 的第一次接触 在 Vue.js 的项目中,如果项目结构简单,父子组件之间的数据传递可以使用 props 或者 $emit 等方式 (详参博文《Vue进阶(六):组件之间的数据传递》)...

sunhuaqiang1
2018/05/05
0
0
vuex实现路由左右切换动画同时嵌套路由使用不同动画(兼听手机返回键或自写按钮)

示例 (hash/ history) http://47.94.90.89/dist 一、安装vue-cli 1 下载安装node.js 2 npm install -g cnpm --registry=https://registry.npm.taobao.org 换源 3 cnpm install -g vue-cli 全......

任倩坤
2018/05/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数组foreach()遍历中的传递引用

在PHP的foreach ($arr as $k => $v) 的遍历中,每一轮的遍历,都发生了以下事情 $k = currentKey($arrCopy); //将副本数组本轮次的键的值分配给$k,比如下标0,1,2等;$v = currentVal($arrCo...

vinci321
今天
140
0
将文件从Docker容器复制到主机 - Copying files from Docker container to host

问题: I'm thinking of using Docker to build my dependencies on a Continuous Integration (CI) server, so that I don't have to install all the runtimes and libraries on the agent......

技术盛宴
今天
117
0
略谈分布式系统中的容器设计模式

本文作者:zytan_cocoa 略谈分布式系统中的容器设计模式 谭中意 2020/3/5 前言:云原生(Cloud Native)不仅仅是趋势,更是现在进行时,它是构建现代的,可弹性伸缩的,快速迭代的计算网络服...

百度开发者中心
03/11
144
0
elasticsearch 第三讲

es的详细介绍 SearchTemplate tmdb 表示的是模板名称 dmdb1 表示的是当前的索引 脚本方式编辑 ##编辑模板POST _scripts/tmdb{ "script": { "lang": "mustache", "source": { ......

鸡蛋炒馒头
今天
215
0
IDEA新建springMVC项目,启动后访问Controller报404

IDEA新建springMVC项目,启动后可以访问到默认的index.jsp,但是访问controller就报404 查看web.xml配置 spingmvc.xml配置 都没有问题 请求的url也和定义的@RequestMapping一致。也没有问题。...

vicky_dimi
今天
322
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部