Vuex用法及封装

Vuex的介绍和使用建议看官方文档，本文更多的是我对Vuex的一个总结。

• Vuex介绍及使用
• Vuex使用中可能遇到的问题

一.Vuex介绍及使用

1.Vuex是什么

官方的介绍是“Vuex 是状态管理模式”

我们在做组件间数据传递的时候，其方式有多种，比如：

• 组件间通过属性和事件触发的形式进行数据的交互
• 使用缓存localStorage，sessionStorage等
• router 路由跳转时传值
• bus总线机制
• vuex

而vuex最大的特点就是能实时同步更新数据

2.Vuex能解决什么问题

在很多场景下，我们可能会有下面的问题：

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。

3.什么情况下使用 Vuex

官方建议在开发中大型项目的情况下考虑使用Vuex。就我个人而言，当页面的非父子组件间需要实时同步更新数据时，才使用vuex，其他情况都不使用。

4.Vuex如何使用

首先，必须牢记下面这张图

图中，整个虚线部分就是Vuex，我们可以把它看成一个公共仓库store。store中有Actions（行为）、Mutations（变动）和State（状态）。整个的逻辑是组件通过Dispatch调用Actions中的方法，Actions通过Commit调用Mutations中的方法，Mutatisons改变State中的值。

我们看下如何简单使用。首先，在store目录下的index.js文件中写入如下代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    city: '重庆'
  },
  actions: {
    changeCity(ctx, city) {
      ctx.commit('changeCity2', city) // 调用mutations中的方法改变city
    }
  },
  mutations: {
    changeCity2(state, city) {
      state.city = city
    }
  },
  getters: { // 类似计算属性，计算state中的数据提供新的数据
    doubleCity (state) {
      return state.city + ' ' + state.city
    }
  }
})

然后，我们在main.js中引入store

import Vue from 'vue'
import App from './App'
import store from './store/index'

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

接着，我们就能在组件中使用

<div>{{this.$store.state.city}}</div>

我们也可以使用Vuex提供的语法糖，将city映射到组件数据中

先引入

import {mapState} from 'vuex'

再映射，这里我们映射到computed中

  computed: {
    // ...为展开运算符 将vuex中的公用属性city映射到计算属性city中
    ...mapState(['city'])
  }

上面，我们只是调用了city数据，那如何改变city呢？

this.$store.dispatch('changeCity', '北京')

我们也可以使用Vuex中的语法糖，将方法映射到组件中

import {mapActions} from 'vuex'

    methods: {
      ...mapActions([
        'changeCity'
      ])
    }

通过上面的操作，我们发现要改变city，需要先调用actions，再调用mutations来改变city，我们能不能直接调用mutations来改变city呢？这是可以的

this.$store.commit('changeCity2', '北京')

当然，我们也可以使用Vuex的语法糖mapMutations来映射，这里不再介绍。

注：本着能少写就少写的原则，我们在一般的开发中，可能会省略actions步骤。

5.Vuex的简单封装

随着项目越来越复杂，若将所有代码写在一起会显得越来越臃肿，所以我们一般都要进行封装分离。这里，我们将state和mutations进行封装，其他的类似。

新建state.js

let state = {
  city: '重庆'
}

export default state

新建mutations.js

let mutations = {
  changeCity (state, city) {
    state.city = city
  }
}

export default mutations 

然后，我们的代码就可以改成如下这般

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations
})

二.Vuex使用中可能遇到的问题

1.刷新页面数据被重置为初始状态

对于这个问题，我们一般通过 Vuex 与缓存结合使用来解决。

读取数据时

let defaultCity = ''
if (localStorage.getItem('city')) {
  defaultCity= localStorage.getItem('city')
}

const state = {
  city: defaultCity
}

export default state

改变数据时

const mutations = {
  changeCity (state, val) {
    localStorage.setItem('city', val)
    state.city= val
  }
}

export default mutations