Vue学习日记（四）——Vue状态管理vuex

zilu 发布于2019-08-26 11:35 / 1794人阅读

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

前言

先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。

说实在话，我在阅读vuex文档的时候，也很难以去理解vuex，甚至觉得没有使用它我也可以。但是直到我在项目碰到下面这些问题：

当路由切换的时候，原本路由的数据太多，传递过去太麻烦。

有些数据是多个路由需要用到的，那我就需要从后台获取多次数据

当然，这些问题都可以解决，就是在实例化vue对象的时候，就将这些数据绑定在window对象上面。但是我们也不得不设想：

万一数据太多了，那么可阅读性是不是会下降

如果只是修改多带带的数据，是不是所有的页面都可以更新

对于第一个问题，答案是肯定的，虽然说，我们现在也可以用模块化的思想去使可阅读性更加好，但是没有一个规范，对于刚入手项目的总是难以理解。

对于第二个问题，当你页面少的时候，是不会出现这样的问题的，但是如果页面多了，你就会发现，当你把window.$data里面的数据更新的时候，所有页面的计算属性都会失效，就是你无论怎么修改数据，页面都不会更新数据。

这时候，就需要用到我们的vuex了。

vuex介绍

那么vuex 到底是什么？

引用官网的说法就是Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

是不是还是有点难以理解，其实简单的说vuex就是把这个项目的所有数据都存储在一个地方，方便修改和获取数据。

例如，我们从下面这张图给大家先简单的分析一下

在这张图片里面我们很明显可以看到三个部分

Vue Components 表示vue里面的组件

Backend API 后台API

vuex 组件里面的数据管理

我们可以生动形象的理解，如果说Vuex是一个仓库，那么么Vue Components就就是售货者，负责把仓库里面的东西展现出来，Backend API就相当于入货的人，负责将货物买进来（也就是后台返回数据给前端，保存在vuex里面）。而vuex就是仓库，这个仓库里面有货物state，有管理货物进出的Muations

引用vuex

在说state之前，我们可以先在我们vue项目引用vuex

npm install vuex

然后在我们的src目录下新建一个store的文件夹，在store文件夹里面新建一个index.js的文件

// ~/src/store/index.js
import Vue from "Vue"
import Vuex from "Vuex"

// 在这里声明实例一个Vue 去引用Vuex状态管理插件
// 这样就可以减少在main.js里面的代码量了
Vue.use(Vuex)

// 返回store实例对象
export default new Vuex.Store({
})

这里说一下吧，这里Store其实就是相当vuex实例化的一个仓库。

data替代者state

为什么说state是data的替代者呢？

很容易理解，就是讲组件里面的局部参数，改成了一个可以全局使用的参数state，例如，我们在me.vue组件引用的数据todo。

那么我们可以在store里面这样实例化它出来

// ~/src/store/index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  }
})

那么，我们在组件里面怎么使用这个数据呢？

// me.vue组件文件

// ...

// ...

是不是很简单，但是我们不可能每次使用这个值都要获取一次吧，这些vue团队也都想好了，我们可以通过计算属性来获取state里面的数据。

// ...

// ...

相当于

// ...

// ...

计算属性Getter

有时候我们会需要对state的数据进行一些过滤操作，例如我们只要在todo里面大于10的数字，如果是用computed的话，我们就需要使用filter函数，为了更加简便，vuex也给我们提供了计算属性getter。

我们可以修改我们的~/src/store/index文件

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  }
})

然后在me.vue里面引用

// ...

// ...

这样就可以简单拿到大于10的todo数据了

修改state的Mutation

我们说了怎么获取数据，但是我们应该怎么修改数据呢，是不是直接赋值给数据就可以了呢？

答案当然不是，vuex规定了，我们只能用Mutation来进行修改数据，那么，我们怎么进行修改数据呢？
修改我们的~/src/store/index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  },
  mutations: {
    revsiseTode: (state, oneTodo) => (state.todo = oneTodo) // 修改state的值
  }
})

然后在我们的me.vue组件里面修改

// ...
// 在多带带构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from "vuex"
// 在多带带构建的版本中辅助函数为 Vuex.mapMutations
import { mapMutations } from "vuex"

export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      "todo"
    ])
  },
  method: {
    ...mapMutations(
      [
        // 将 `this.revsiseTode()` 映射为 `this.$store.commit("revsiseTode")`
        // 如果想传递参数可以使用this.$store.commit("revsiseTode", oneTode)
        // 或者Action
        "revsiseTode" 
      ]
    )
  }
}

Action的使用

写了这么久，终于到了Action的出场了，其实不管怎么说，Action主要是为了与后台交互而使用的属性，这里，我就假设todo的数据在路由/me/gettodo里面能够获取，因此，修改~/store/index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  },
  mutations: {
    revsiseTode: (state, oneTodo) => (state.todo = oneTodo) // 修改state的值
  },
  actions: {
    getTodo: context => Vue.http.get("/me/gettodo", (res) => {
      context.commit("revsiseTode", res.body.todo)
    })
  }
})

然后就可以通过触发我们的actions来提交mutations去修改state的数据了，在me.vue修改

// ...
// 在多带带构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from "vuex"
// 在多带带构建的版本中辅助函数为 Vuex.mapMutations
import { mapActions } from "vuex"

export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      "todo"
    ])
  },
  method: {
    ...mapActions(
      [
        "reviseTodo", // 将 `this.reviseTodo()` 映射为 `this.$store.dispatch("reviseTodo")
      ]
    )
  }
}
// ...

vuex目录结构

上面主要只是简单的讲了一下vuex的使用，也只是讲了一部分，不过相信看了这里之后再去官网就会有更深的理解。当然这些都是简单的使用，如果想把vuex运用到项目，必须把他们模块化更加好看，vuex官网也为我们提供了规范的项目目录结构，我这里就不多啰嗦几句了。

总结

vuex其实不难，我一开始也以为很难一直学不会，只要多使用就会觉得，其实也就只是别人都封装好了的方法，我们去使用这个简便的仓库就行了。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107190.html

Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

fai1017 2019-08-30 13:53 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

fjcgreat 2019-08-01 18:30 评论0 收藏0
Vue学习日记（一）——Vue介绍

摘要：的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。的目标是通过尽可能简单的实现响应的数据绑定和组合的视图组件。并不是框架，只是和他旁边的生态环境组成了一个框架，下面，贴一个官方的渐进式框架介绍图吧，方便理解。前言本人学习了一段时间的vue，并尝试写了一些小Demo之后，将vue投入了几个项目之后，一直在边学习边使用，经过看了vue,vuex,vue-route...

王晗 2019-08-26 11:33 评论0 收藏0
Vue学习日记（一）——Vue介绍

摘要：的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。的目标是通过尽可能简单的实现响应的数据绑定和组合的视图组件。并不是框架，只是和他旁边的生态环境组成了一个框架，下面，贴一个官方的渐进式框架介绍图吧，方便理解。前言本人学习了一段时间的vue，并尝试写了一些小Demo之后，将vue投入了几个项目之后，一直在边学习边使用，经过看了vue,vuex,vue-route...

MasonEast 2019-08-29 14:22 评论0 收藏0
Vue学习日记（三）——Vue路由管理vue-router

摘要：重定向可以实现某些需要根据特定逻辑改变页面原本路由的需求，例如简单的未登录状态下的页面访问个人信息路由时应该重定向到登录路由页面。前言为了给读者更好的体验，去理解vue-router和下一篇介绍vuex，决定还是来一个实战教程来带大家更加的去深入理解vue-router，在这之前，读者先自行了解和去官网下载npm和node，附：npm官网项目构建这里我采用vue-cli+web...

iKcamp 2019-08-30 13:54 评论0 收藏0