前后端分离(7)—Vuex实战用法 - 前端劝退师

前后端分离(7)—Vuex实战用法

作者: 前端劝退师

全网最懒博主

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

只要掌握这一个方法就可以解决大部分的问题。

弄明白什么是vuex,我封装了一个简单的input组件,方法如下:
在views目录下创建一个vue组件
plugin.vue

内容如下图

  1. <template>
  2. <a-input v-model="this.$store.state.count"/>
  3. </template>

v-model我绑定了一个全局变量,就是vuex的读取方式;
this.$store.state.count

整个组件就三行代码

然后将组件调用到list文件里
调用组件
import zujian1 from '@/views/plugin.vue'
注册使用组件

  1. components:{
  2. zujian1
  3. },


最后写入一个全局变量
this.$store.state.count="这是在list里定义的vuex值";
其实this.$store.state是vuex的state方法。我们插入了一个名为count的变量。

上面的工作就做完了 在template里面调用组件

<zujian1 style="width:200px;"></zujian1>

整个文件就像下图

现在刷新页面看一下

总结:在list定义的值被带到了组件里。这就是vuex的最主要的用处。不然组件里可读不到list里你传递的data值。

本文最后更新于2019-8-6,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏
未经允许不得转载:

作者: 前端劝退师, 转载或复制请以 超链接形式 并注明出处 前端劝退师
原文地址: 《前后端分离(7)—Vuex实战用法》 发布于2019-8-6

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏