前后端分离(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值。

联系作者
作者QQ:1538888858 有事请联系作者

Article tags:

作者头像
前端劝退师创始人

分享前端开发资源和前端开发技术资讯等,主攻前后端分离技术;分享个人经历。

Prev前后端分离(6)—什么情况下我应该使用 Vuex?

发表评论

评论列表

暂无评论