vuex - 简单使用步骤梳理,轻松掌握、附源码

首先,目录结构依然如下:

按配置顺序来说:

store.js(有时也命名为index.js)页面

store配置主要分以下几大块:

第一,引入依赖

vue和vuex不用说,getters、actions、mutations三个是用来增删改查store的,

 再引入一些自己需要的依赖,比如store中用到数据请求时,引入$axios,

如需根据状态切换路由,再引入router

如需要设置存储sessionstore时再引入自命名的ls配置文件等。

第二,使用vuex

Vue.use(Vuex)

第三,定义vuex数据状态

let state = {...}

第四,业务逻辑处理

自己需要使用store所做的一些业务逻辑,可以在这里定义处理了。

第五,输出

1 export const store = new Vuex.Store({
2   state,
3   getters,
4   actions,
5   mutations
6 });

接下来,store里边设置了state数据,想要取到的话,就去getters里边设置

getters.js页面

我这里偷个懒,全部抛出了自己的state,然后使用时直接state.属性了。

 修改store数据三步走 - 流程如下

vue组件中dispatch、action.js中commit、mutations.js文件中执行

1.组件内部dispatch分发任务

2.action.js传达任务

3. mutations.js里边执行具体任务

多了一个mutation-type.js,他的作用是给mutations里边定义变量名称用的。

具体为什么非要这么分出来写下,除了便于管理之外,我也不知道更好的理由了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏轻量级微服务

微服务下跨语言 RPC 实现

目前主流的 Java 开发框架 Spring Boot,为了更方便集成 gRPC,自己开发了 spring-boot-starter-grpc,仅需简单的几行配...

1883
来自专栏xiaoheike

hibernate一级缓存

Hibernate 一级缓存默认是打开,不需要任何的配置。实际上,你无法强制禁止它的使用。 如果你理解了一级缓存实际上和会话是关联的,就很容易理解一级缓存。总...

1511
来自专栏Python绿色通道

Python的线程

Python的标准库提供了两个模块: thread 和threading,thread 是低级模块,threading是高级模块,对thread 进行了封装。绝...

1223
来自专栏前端说吧

vuex - 简单使用步骤梳理,轻松掌握、附源码

2924
来自专栏CDN及云技术分享

GDB实现原理和使用范例

这篇文章为了让你深入了解gdb的工作原理,以及如何在linux环境下使用强大的gdb调试程序功能。

6141
来自专栏应兆康的专栏

Python Web - Flask笔记2

导入config.py后app.config.from_object(config)

1662
来自专栏思考的代码世界

Python基础学习09天

1616
来自专栏前端布道

MongoDB初识

什么是MongoDB MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统。 在高负载的情况下,添加更多的节点,可以保证服务器性能。 ...

3738
来自专栏java、Spring、技术分享

JVM监控及诊断工具

jstat用法 其中-gc可以换成-class 、-gcnew、-gcold等参数;而54992表示的JVM的进程id(可能通过上面的jps命令查看...

1702
来自专栏Ryan Miao

java线程(1)--概念基础

参考:http://lavasoft.blog.51cto.com/62575/99150 http://blog.csdn.net/baby_newstar/...

3258

扫码关注云+社区