码云笔记前端博客
Home > JavaScript > [Vue教程]快速认识vuex

[Vue教程]快速认识vuex

2019-03-06 分类:JavaScript 作者:管理员 阅读(5021)

本文共计2564个字,阅读时间预计7分钟,干货满满,记得点赞加收藏哦

为什么要用Vuex?

首先我来引入一个概念,单向数据流的概念。

单向数据流的概念

我们页面是有很多个视图View组成的,用户的操作Actions会带来视图上状态State变化,状态的变化又会驱动视图的更新,如果我们的页面没有采用这样的数据流方式开发的话,那么组件间的状态管理就会异常复杂。

我们常见的用vuex解决问题,多个视图依赖同一状态的这样问题,比如菜单导航。来自不同视图的行为需要改变同一状态的问题,比如评论的弹幕,当我们发出一条评论的时候,我们要去改变弹幕的状态,去给它新增一条弹幕或者说删除一条旧的弹幕。

什么是vuex?

vuex就是为vue.js开发的状态管理模式,组件状态集中管理,组件状态改变遵循统一的原则

我来看一个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
    <div>
      hello info component
    </div>
</template>

<script>
    export default {
        name: "Info.vue"
    }
</script>

<style scoped>

</style>

这个例子是我们用vue-cli工具中的ui工具所形成的工程hello-ui,当初我们选择了Vuex这个组件,所以它帮我们生成了store.js

利用vuex生成storejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  }
})

打开这个文件我们看到它引入了vuex,在Vue这个对象上绑定了vuex,在Vuex.Store这个方法里它传递了一个对象,有state、mutations、actions这样三个属性,我们重点来认识一下state和mutations。

state顾名思义就是组件的状态,在这里做一个集中的管理。mutations是唯一一个可以去改变vuex状态的一个方法集,所有的方法都放在这个里面。

这里我新添加了一个Info.vue组件,在组件中我添加一个按钮,每次点击触发一个click事件去执行add方法。

1
2
3
4
5
6
<template>
    <div>
      hello info component
      <button type="button" @click="add()">添加</button>
    </div>
</template>

然后我们在script中写我们的add方法,在控制台打印。

1
2
3
4
5
6
7
8
9
10
<script>
    export default {
        name: "Info",
        methods: {
          add() {
            console.log('add Event from info!')
          }
        }
    }
</script>

打开调试工具,我们点击Info,在控制台当我们点击添加按钮的时候看一下会有什么变化或者输出,可以看到正好是我们要打印输出的信息,说明这个事件已经成功了。

vuex控制台打印信息

如何在页面上使用vuex呢?很简单,我们在script首行用import store from '@store'引入即可,这里@store.js可以省略js,这个@符号大家可以看一下vue-cli工具的config配置文件,@就是代表src这个目录,然后在引入store

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    import store from '@/store'
    export default {
        name: "Info",
        store,
        methods: {
          add() {
            console.log('add Event from info!')
          }
        }
    }
</script>

然后在store.js中给它传入state状态定义一个count计数,在mutations中定义一个increase方法,执行这个方法每次去改变状态让count值去加1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    inscrease() {
      this.state.count ++
    }
  },
  actions: {

  }
})

然后在Info.vue中怎么改变它的状态呢?使用state.commit('')这个关键词,引号里面就是store.js里面mutations中刚定义好的inscrease方法名字。这样我们每次点击添加按钮的时候,执行的add方法里面就会提交inscrease这样的一个mutations或者说是提交这样一个事件出去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
    <div>
      hello info component
      <button type="button" @click="add()">添加</button>
    </div>
</template>

<script>
    import store from '@/store'
    export default {
        name: "Info",
        store,
        methods: {
          add() {
            console.log('add Event from info!')
            store.commit('inscrease')
          }
        }
    }
</script>
<style scoped>
</style>

我们到页面上看一下,打开控制台调试工具,选择Vuex,如下图操作:

vuex调试工具使用

然后当我们点击添加按钮时,就会在控制台中输出我们定义好的inscrease这个mutations,然后每次点击添加这个state状态的count值就会发生一个变化。

点击添加按钮改变state值

如何将state状态的count值传入到About组件呢?很简单,在About.vue组件里面引入Vuex,然后直接在页面上引入它就可以了,我在script中定义一个data,在页面上定义一个msg变量,用store.state.count就可以引用到store状态了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{msg}}</p>
  </div>
</template>
<script>
  import store from '@/store'
  export default {
    name: 'about',
    store,
    data () {
      return {
        msg: store.state.count
      }
    }
  }
</script>

当我们点击添加按钮时,count值发生变化,我们切换到about组件上可以看到msg打印出来了

about组件打印msg值

从上面的例子看出,我们要使用vuex首先要定义一个store.js文件,然后去引用vuex组件“Vue.use(Vuex)”,定义state、mutations,state里面是我们要管理的公用状态,mutations是定义改变state状态的方法。在组件中如何使用vuex呢?我们首先要引用store这个文件,然后在组件的default里面去引用store,最后在组件中使用到一个commit关键词用store.commit去提交修改。

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(17) 打赏

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

支付宝
微信
17

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

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - [Vue教程]快速认识vuex

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 476 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1050 个
  • 建站时间: 525 天
  • 访问总量: 8648382 次
  • 最近更新: 2019年11月21日