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 条评论
登录 后参与评论

相关文章

来自专栏Java编程技术

白话网络通讯

无论你是纯socket通讯,还是应用层的http,Rpc协议进行通讯,本质底层都是传输二进制流

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

GDB实现原理和使用范例

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

3611
来自专栏Petrichor的专栏

AttributeError: 'module' object has no attribute 'fullmatch'.

经过查找,发现出错的原因是 re库 中的 fullmatch函数 是 在py3.4之后才新添加的 。

1873
来自专栏前端布道

MongoDB初识

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

3618
来自专栏轻量级微服务

微服务下跨语言 RPC 实现

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

1433
来自专栏Python绿色通道

Python的进程

Python实现多进程的方式主要有两种:一种方法是使用os模块中的fork方法; 另一种是使用multiprocessing模块。这两种方法的区别在于前者仅适用...

532
来自专栏Core Net

ASP.NET Core 2.0 : 七.一张图看透启动背后的秘密

1662
来自专栏前端说吧

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

2884
来自专栏耕耘实录

几个Linux命令及脚本使用中的奇淫巧技

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢

582
来自专栏Python小屋

Python内置函数eval()用法及其安全问题

Python内置函数eval()用来对表达式进行求值: >>> eval('3+5') 8 >>> a = 3 >>> b = 5 >>> eval('a+b'...

7059

扫码关注云+社区