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

相关文章

来自专栏python3

python .pyc是个什么啥?

我初学Python时,听到的关于Python的第一句话就是,Python是一门解释性语言,我就这样一直相信下去,直到发现了*.pyc文件的存在。如果是解释型语言...

851
来自专栏移动端开发

详解Swift和OC的混编

前言:      我们在一些情况下,仅仅使用swift 是无法完成一个项目的,在swift项目中必要用到 OC 实现一些功能,比如,项目要使用一些第三方的框架,...

1758
来自专栏木头编程 - moTzxx

小程序 动态修改二维数组 示例

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

581
来自专栏一名合格java开发的自我修养

java接口调用——webservice就是一个RPC而已

  很多新手一听到接口就蒙逼,不知道接口是什么!其实接口就是RPC,通过远程访问别的程序提供的方法,然后获得该方法执行的接口,而不需要在本地执行该方法。就是本地...

602
来自专栏前端说吧

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

2844
来自专栏yukong的小专栏

【ssm个人博客项目实战06】博客类别的添加修改删除的实现1、博客类别service层完善3、博客类别管理界面功能完善1、功能实现

在前面两篇博客中我们分别实现了在dao层的博客类别的增删改查已经分页,以及在后台管理系统界面中的博客类别的分页显示,那么现在我就要准备实现了在后台管理界面的博客...

896
来自专栏python3

python爬虫常用模块

涉及到网络这块,必不可少的模式就是urllib.request了,顾名思义这个模块主要负责打开URL和HTTP协议之类的

661
来自专栏开源优测

如何用Python调用java程序

如何用Python调用java程序 前言 不会java怎么做Java程序的单元测试呢?我想有一种很好的选择就是Python,充分利用Python的胶水语言的特性...

4255
来自专栏猛牛哥的博客

aardio v13.11-21更新内容

1654
来自专栏IMWeb前端团队

测试工具mocha用法小结

这篇是前段时间总结给自己备忘的,要用到的工具实在太多,没法一一记住。 个人感觉,作为一个测试的工具,只要会用就好了。 所以这里稍微做了一些修改,简单介绍一下常用...

2530

扫码关注云+社区