Vuex用法及封装

本文链接： https://blog.csdn.net/qq_39025670/article/details/100047999

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

一.Vuex介绍

1.Vuex是什么

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

2.Vuex能解决什么问题

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

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

简单而言，我们在做组件间数据传递的时候，一般是通过属性和事件触发的形式进行数据的交互，但在嵌套比较复杂的父子组件和兄弟组件间使用这种方式显得非常的繁琐，这时我们就可以考虑使用Vuex做数据的共享。

3.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步骤。

4.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介绍

猜你喜欢