【LSP】Vuex与axios的封装和调用

linxun   ·   发表于 3个月前   ·   编程代码

Vuex状态管理
状态就是数据。 在react里有个Flux的数据流管理(单向数据流)
作用1:实现组件之间的数据共享。
作用2:用于缓存。(避免当用户频繁点击,页面不断调接口)


先安装状态管理工具
npm install vuex -S

1.在Src文件夹里创建一个store文件夹。
2.创建一个index.js的文件,里面引入vuex,如下

再在main.js入口文件里引入状态管理.


store里的各个选项的含义:
①:state----->要被共享的数据,都放在state中

在需要引用的地方通过$store.state.msg对应的key值,即可取到共享的数据.



console.log(this.$store)----------->一个Store类,里面有各种键值对
state、mutations、getters、actions、modules等等,里面有个key为state的键值对,通过this.$store.state可以找到vuex中state里所有的数据.
②:mutations---------->是用于改变与修改state的,当state被修改完成,页面视图自动更新。(mutations里的每个方法的第一个形参都为state)
作者不建议用这种方式直接修改共享的state数据.

建议写法:


Store这个类就好比整个Vue的类一样,当你想调用Store这个类里的方法时,在Store中就必须通过commit去提交一个字符串,并在store中寻找对应字符串的函数去触发,如上图。函数如何执行就在state中定义了

状态管理是一种单向数据流

4 Reply   |  Until 3个月前 | 3746 View

葫芦侠  
发表于 3个月前

[太开心]来了[太开心]

评论列表

  • 加载数据中...

编写评论内容

颜༒汐(七岁)
发表于 3个月前

大佬[滑稽]我都肝完超额了

评论列表

  • 加载数据中...

编写评论内容

481678144
发表于 3个月前

[滑稽]我是这个‭@九亥伯龙 ‬‬‬

评论列表

  • 加载数据中...

编写评论内容

强哥哥
发表于 3个月前

你还在吗[太开心]

评论列表

  • 加载数据中...

编写评论内容
LoginCan Publish Content