JS每日一题：什么情况下适合使合vuex？Vuex使用中有几个步骤？

wow_worktile 发布于2019-08-23 15:22 / 891人阅读

摘要：什么情况下适合使合使用中有几个步骤开始之前先简单了解一下定义是一个状态管理机制采用集中式存储应用所有组件的状态嗯，就是一句话能说明白的，没明白的，我们用代码再理解一下什么叫集中式式存储比如下面这段代码，同时需要用到，那么我们首先能想到就是在

20190121

什么情况下适合使合vuex？Vuex使用中有几个步骤？

开始之前先简单了解一下vuex

定义: vuex是一个状态管理机制,采用集中式存储应用所有组件的状态

嗯，就是一句话能说明白的，没明白的，我们用代码再理解一下什么叫集中式式存储

比如下面这段代码，同时需要用到username，那么我们首先能想到就是在两个组件内都进行一次获取username的操作, 这种操作是有明显弊端的, 如带宽资源浪费，代码不好维护等等

// a.vue


// b.vue

那么集中式是什么概念呢，就是把整个应用的状态独立出来当成一个树形结构管理，所有叶子数据的更改都使用唯一的通道进行操作，下面用代码再来理解一下

// a.vue


// b.vue

什么情况下适合使合vuex

老生常谈的话题，每个人的使用动机不同可能结果就不同，站在系统架构的角度上来，vuex虽然能很好帮助我们管理状态, 但随之也带来更多的概念让我们花时间来消化，一般情况下我们会根据项目的实际大小来决定是否需要引入vuex

Vuex使用中有几个步骤

先上一张图理解一下vuex工作的流程

从图中我们可以看到vuex包含了3个关键词

state

actions

mutations

只要知道就行，后面再展开讲

先看下最简单使用vuex的方式

// store.js
// store中管理store以及mutations, 然后在组件中通过commit来触发store中mutations的方法
const store = new Vuex.Store({
  state: {
    name: "JS"
  },
  mutations: {
    updateName (state) {
      state.name = "JS每日一题"
    }
  }
})

// a.vue
store.commit("updateName") // JS每日一题

state

字面意思就是状态，上面也说了vuex是集中式管理，那么在这里就理解成为集中管理的状态(全局可使用状态)

组件中获取状态可以通过以下方式

const Demo = {
  template: `{{ name }}`,
  computed: {
    name () {
      return store.state.name
    }
  }
}

// 也可以通过mapState 辅助函数来获取

  computed: mapState({
      name: state => state.name
  })
  
// 引入多个state可以通过对象展开运算符来获取
  computed: {
      ...mapState({
        name
        // ...
      })
  }

mutations

更改vuex中的store的唯一途径就是mutation,且必须是同步函数

代码理解

  // 首先mutations 是一个对象
  // 下面的updateName 展开写就是 updateName : function(){}, 在vuex叫做Type Handler
  // 根据上一条的解释，所以会看到很多mutations的写法类 [GET_USER_INFO] : (state) => {}
  // 你不能直接调用mutations.updateName, 因为mutations 只负责注册事件,需要通过store.commit(type) 来唤醒对应type的handler
  // Mutation 需遵守 Vue 的响应规则,也就是说没有被Object.defineProperty 劫持到的state不会响应式, 比如你有一个state为obj = {}, 然后你通过mutation来为obj新增一个属性，
  这时候你需要替换原有的obj组件才会正常响应，
  常用的方式可以通过Object.assign()
  mutations: {
    updateName (state) {
      state.name = "JS每日一题"
    }
  }
  
  // 组件中可以通过mapMutaions 辅助函数来映射关系
  // 下面等同于 this.updateName()  this.$store.commit("updateName")
  methods: {
      ...mapMutaions([
        "updateName",
        ...
      ])
  }

Action

Action 类似于 mutation，提交的是 mutation，而不是直接变更状态。简单来说就是mutation只负责同步操作，action负责异步操作

  mutations: {
    updateName (state) {
      state.name = "JS每日一题"
    }
  },
  actions: {
    // context是一个具有store 实例相同方法和属性的对象
    getUserInfo (context) {
          setTimeout(() => {
              commit("updateName")
          }, 1000)
    }
  }
  
  // 组件中可以通过mapActions 辅助函数来映射关系
  // 下面等同于 this.getUserInfo()  this.$store.commit("getUserInfo")
  methods: {
      ...组件中可以通过mapActions([
        "getUserInfo",
        ...
      ])
  }

总结

vuex是一种状态管理机制，将全局组件的共享状态抽取出来为一个store，以一个单例模式存在，应用任何一个组件中都可以使用，vuex更改state的唯一途径是通过mutation，mutation需要commit触发, action实际触发是mutation，其中mutation处理同步任务，action处理异步任务

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

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

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

JS每日一题: 请简述一下vuex实现原理

摘要：给的实例注入一个的属性，这也就是为什么我们在的组件中可以通过访问到的各种数据和状态源码位置，是怎么实现的源码位置是对的的初始化，它接受个参数，为当前实例，为的，为执行的回调函数，为当前模块的路径。 20190221 请简述一下vuex实现原理对vuex基础概念有不懂的可以点这里 vuex实现原理我们简单过一遍源码地址 https://github.com/vuejs/vuex 首...

JohnLui 2019-08-23 15:25 评论0 收藏0
前端面试题总结——VUE（持续更新中）

摘要：前端面试题总结持续更新中是哪个组件的属性模块的组件。都提供合理的钩子函数，可以让开发者定制化地去处理需求。前端面试题总结——VUE（持续更新中） 1.active-class是哪个组件的属性？ vue-router模块的router-link组件。 2.嵌套路由怎么定义？在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 //引入两个组件 ...

SimonMa 2019-08-22 16:08 评论0 收藏0
vue 248+个知识点（面试题）为你保驾护航

摘要：要招一个会的开发者作为面试官的你，你还会每次都只是问这些老土的问题吗你对的理解是什么你知道什么是双向绑定吗你了解它的原理吗说说的生命周期有哪些组件通讯有哪些你用过吗作为面试者的你，在网上搜索下面试题及答案，看完后你是不是觉得自己掌握了武林秘 showImg(https://segmentfault.com/img/bVburrG?w=533&h=300); 要招一个会vue的开发者： ...

snowell 2019-08-23 18:22 评论0 收藏0
JS每日一题:Webpack如何实现一个Loader？

摘要：期如何实现一个我们在上几节有讲过今天我们来深入了解它们最暴力的方式莫过于动手实现它们好了，回到正题先来回顾一下定义用于对模块的源代码进行转换。可以使你在或加载模块时预处理文件简单使用是导出为一个函数的模块。 20190329期如何实现一个Loader？我们在上几节有讲过loader,今天我们来深入了解它们,最暴力的方式莫过于动手实现它们好了，回到正题, 先来回顾一下loader ...

HollisChuang 2019-08-26 13:42 评论0 收藏0
JS每日一题：react中类组件和函数式组件中有什么不同?

摘要：期中类组件和函数式组件中有什么不同在中创建组件的形式有三种纯函数式定义的无状态组件定义的组件定义的组件今天我们要聊的是纯函数式定义的无状态组件及类组件的到底有什么不同分别在什么场景下适合使用首先我们来看一下用上述方法如何来创建一个组件定义的 20190306期 react中类组件和函数式组件中有什么不同? 在react中创建组件的形式有三种纯函数式定义的无状态组件 React.cr...

Java_oldboy 2019-08-26 13:32 评论0 收藏0