router中获取vuex_JS每日一题: 什么情况下适合使合vuex？Vuex使用中有几个步骤？...

20190120

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

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

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

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

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

// a.vue

   

{{username}}div>

template>

// b.vue

   

{{username}}div>

template>

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

// a.vue

   

{{username}}div>

template>

// b.vue

   

{{username}}div>

template>

computed: {

   username () {

       // store就是我们应用的集中管理器,跟组件解藕，需要的时候就用到，叫即插即用

       return store.state.count

   }

},

script>

什么情况下适合使合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每日一题: Vue-router有哪些钩子？使用场景？

JS每日一题: Vue.use中都发生了什么？

基友噢如果喜欢，可以分享给好基友噢如果喜欢，可以分享给好基友噢

关注「JS每日一题」，参与答题！

▲长按图片识别二维码