[Vue教程]快速认识vuex

为什么要用 Vuex?

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

单向数据流的概念

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

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

什么是 vuex?

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

我来看一个例子:

<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
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 方法。

<template>
    <div>
      hello info component
      <button type="button" @click="add()">添加</button>
    </div>
</template>

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

<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

<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

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 或者说是提交这样一个事件出去。

<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 状态了

<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

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » [Vue教程]快速认识vuex

发表回复