Vuex 快速入门上手教程

作者: 这个前端不太冷 | 来源:发表于2019-08-02 19:14 被阅读0次

一. 什么是Vuex?

vuex-explained-visually.png

Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.

Vuex核心

上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改. action 的作用跟mutation的作用是一致的，它提交mutation，从而改变state，是改变state的一个增强版.Action 可以包含任意异步操作。可能你现在看这张图有点不明白, 等经过本文的解释和案例演示, 再回来看这张图, 相信你会有更好的理解.

二. 为什么要使用Vuex?

试想这样的场景, 比如一个Vue的根实例下面有一个父组件名为App.vue, 它下面有两个子组件A.vue和B.vue, App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式。但是如果A或者B组件有子组件，并且要实现父组件与孙子组件的通信。或者与嵌套的更深的组件之间的通信就很麻烦。如下图：

716127-20180119171257271-1822439203.png

另外如果A.vue和B.vue之间的通讯他们需要共有的父组件通过自定义事件进行实现,或者通过中央事件总线
实现。也很麻烦。如下图：

716127-20180119171307849-26505562.png

Vuex就是为了解决这一问题出现的

三.如何引入Vuex?

安装vuex:

npm install vuex --save

在main.js添加:

import Vuex from 'vuex'

Vue.use( Vuex );

const store = new Vuex.Store({
    //待添加
})

new Vue({
    el: '#app',
    store,
    render: h => h(App)
})

四. Vuex的核心概念?

为了方便理解概念，我做了一个vuex的demo。git地址：(vuex demo)[https://github.com/zhou111222/vue-.git]
vuex的文件在store文件夹下。store中的modules文件下包含两个文件。文件名和页面的名称是一致的，代表每个页面的vuex。index文件负责组合modules文件夹中各个页面的vuex。并导出。mutations-type文件里面定义一些操作mutation的字符串常量变量名，这里是定义一些动作名，所以名字一般是set 或者是update,然后再结合state.js中定义的变量对象，export多个常量。

image.png

核心概念1: State

state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.

此时我们就可以把项目中的公共状态抽离出来, 放到mudules对应页面的state中,代码如下:

//detail.js
import * as types from '../mutation-type'

const state = { // 要设置的全局访问的state对象
  gold: 'BALLY/巴利',
  num: 1,
  groupData: {}
}

export default {
  namespaced: true, // 用于在全局引用此文件里的方法时标识这一个的文件名
  state
}

// home.js
import * as types from '../mutation-type'

const state = { // 要设置的全局访问的state对象
  carNumber: 0
}
export default {
  namespaced: true, // 用于在全局引用此文件里的方法时标识这一个的文件名
  state
}

此刻store文件夹下的index代码。两个页面的store进行合并：

//ProductListOne.vue
import Vue from 'vue'
import Vuex from 'vuex'
import home from './modules/home'
import detail from './modules/details'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    home,
    detail
  }
})

在main.js中讲store注入到vue中。代码如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import VueBus from './assets/js/bus'
// 中央事件总线封装
Vue.use(VueBus)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, // 使用store
  components: { App },
  template: '<App/>'
})

home.vue和detai.vue中使用state的方式如下：

{{this.$store.state.属性名}}

核心概念2: Getters

可以将getter理解为store的computed属性, getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

此时,我们可以在store/modules/home.js中添加一个getters对象, 其中的carNum将依赖carNumber的值。

import * as types from '../mutation-type'

const state = { // 要设置的全局访问的state对象
  carNumber: 0
}

const getters = {
  carNum (state) {
    return state.carNumber
  }
}
export default {
  namespaced: true, // 用于在全局引用此文件里的方法时标识这一个的文件名
  state,
  getters
}

另外,我们可以在store/modules/detail.js中添加一个getters对象, 其中的getProductdNum将依赖state.num的值。getGroupData 将依赖state.groupData的值。

//home.js
import * as types from '../mutation-type'

const state = { // 要设置的全局访问的state对象
  gold: 'BALLY/巴利',
  num: 1,
  groupData: {}
}

const getters = {
  getProductdNum (state) {
    return state.num
  },
  getGroupData (state) {
    return state.groupData
  }
}

export default {
  namespaced: true, // 用于在全局引用此文件里的方法时标识这一个的文件名
  state,
  getters
}

核心概念3: Mutations

我将mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,函数第一个参数是state, 第二参数是payload, 也就是自定义的参数.该函数名的名称官方规定叫type,在模块化的思想中。type的名称被单独抽离出来放到了mutation-type文件。mutation-types.js：在这里面定义一些操作mutation的字符串常量变量名，这里是定义一些动作名，所以名字一般是set 或者是update,然后再结合state.js中定义的变量对象，export多个常量：


//存储mutation的一些相关的名字，也就是一些字符串常量
//即使用常量替代mutation类型
//mutations里面定义一些方法，这里也就是定义mutations里面方法的名字
// 一些动作，所以用set,update

/* home页面 */
export const INIT_CAR_NUM = 'INIT_CAR_NUM'
export const ADD_CAR_NUM = 'ADD_CAR_NUM'
export const REDUCE_CAR_NUM = 'REDUCE_CAR_NUM'

/* detail页面 */
export const ADD_NUMBER = 'ADD_NUMBER'
export const GET_GROUP_DATA = 'GET_GROUP_DATA'

下面,我们分别在store/modules/detail.js中添加mutations属性, mutations中的方法名(type)和在mutation-type.js中定义的名称一致。代码如下:

//home.js
import * as types from '../mutation-type'

const state = { // 要设置的全局访问的state对象
  carNumber: 0
}

const getters = {
  carNum (state) {
    return state.carNumber
  }
}

const mutations = {
  [types.INIT_CAR_NUM] (state, num) {
    state.carNumber = num
  },
  [types.ADD_CAR_NUM] (state) {
    state.carNumber = state.carNumber + 1
  },
  [types.REDUCE_CAR_NUM] (state) {
    if (state.carNumber > 0) {
      state.carNumber = state.carNumber - 1
    }
  }
}


export default {
  namespaced: true, // 用于在全局引用此文件里的方法时标识这一个的文件名
  state,
  getters,
  mutations
}

//detail.js
import * as types from '../mutation-type'

const state = { // 要设置的全局访问的state对象
  gold: 'BALLY/巴利',
  num: 1,
  groupData: {}
}

const getters = {
  getProductdNum (state) {
    return state.num
  },
  getGroupData (state) {
    return state.groupData
  }
}

const mutations = {
  [types.ADD_NUMBER] (state, sum) {
    state.num = state.num + sum
  },
  [types.GET_GROUP_DATA] (state, data) {
    state.groupData = Object.assign({}, state.groupData, data)
  }
}

export default {
  namespaced: true, // 用于在全局引用此文件里的方法时标识这一个的文件名
  state,
  getters,
  mutations
}

在home.vue中添加2个按钮,为其绑定事件。一个按钮负责carNumber的加1，另一个减1。在methods中添加相应的方法。

//home.vue
<template>
  <div class="home">
    <div class="hello">
      <h1>{{ msg }}</h1>
      <ul>
        <li class="groupid">
          list页(vuex异步){{groupId? groupId : ''}}
        </li>
      </ul>
      <div class="car">购物车(vuex同步){{carNumber}}</div>
      <div class="control-car">
        <div class="reduce-car"
             @click="reduceCar()">-</div>
        <div class="add-car"
             @click="addCar()">+</div>
      </div>
      <button @click="goPage()">go list page</button>
      <con3></con3>
      <con4></con4>
    </div>
  </div>
</template>

<script>
import con3 from '@/components/con3'
import con4 from '@/components/con4'
import { mapState, mapMutations } from 'vuex'
import * as types from '@/store/mutation-type'

export default {
  name: 'Home',
  data () {
    return {
      msg: 'hello world'
    }
  },
  components: {
    con3,
    con4
  },
  beforeCreate: function () { },
  created: function () { },
  beforeMount: function () { },
  mounted: function () { },
  beforeUpdate: function () { },
  updated: function () { },
  beforeDestroy: function () { },
  destroyed: function () { },
  computed: {
    ...mapState({
      groupId: state => state.detail.groupData.groupId
    }),
    ...mapState({
      carNumber: state => state.home.carNumber
    })
  },
  methods: {
    goPage: function () {
      // this.$router.push({ path: '/detail' })
      this.$router.push({
        name: 'Detail',
        params: {
          page: '1', sku: '8989'
        }
      })
    },
    ...mapMutations({
      [types.ADD_CAR_NUM]: `home/${types.ADD_CAR_NUM}`,
      [types.REDUCE_CAR_NUM]: `home/${types.REDUCE_CAR_NUM}`
    }),
    addCar: function () {
      this[types.ADD_CAR_NUM]()
    },
    reduceCar: function () {
      this[types.REDUCE_CAR_NUM]()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import '../assets/style/reset.scss';
html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}
#app {
  position: relative;
}
* {
  padding: 0;
  margin: 0;
}
.a {
  font-size: 40px;
}
.b {
  font-family: 'AlternateGothicEF-NoTwo';
  font-size: 40px;
}
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.groupid {
  width: 100%;
  height: 50px;
  background-color: #df8613;
  line-height: 50px;
  text-align: center;
  font-size: 26px;
  margin: 20px 0;
}
.car {
  width: 100%;
  height: 50px;
  background-color: #f5380a;
  line-height: 50px;
  text-align: center;
  font-size: 26px;
  margin: 20px 0;
}
.control-car {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  div {
    width: 60px;
    height: 60px;
    background-color: #42b983;
    float: left;
    margin-right: 20px;
    text-align: center;
    line-height: 60px;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
  }
}
button {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 26px;
  margin: 20px 0;
}
</style>

点击按钮，值会进行相应的增减。

文件中有mapStates，mapMutations等函数，稍后讲。

核心概念4: Actions

actions 类似于 mutations，不同在于：

actions提交的是mutations而不是直接变更状态
actions中可以包含异步操作, mutations中绝对不允许出现异步
actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象
此时,我们在detail.js中添加actions属性, 其中groupData采用接口异步操作获取数据，改变state中的groupData。

//details.js
import * as types from '../mutation-type'

const state = { // 要设置的全局访问的state对象
  gold: 'BALLY/巴利',
  num: 1,
  groupData: {}
}

const getters = {
  getProductdNum (state) {
    return state.num
  },
  getGroupData (state) {
    return state.groupData
  }
}

const mutations = {
  [types.ADD_NUMBER] (state, sum) {
    state.num = state.num + sum
  },
  [types.GET_GROUP_DATA] (state, data) {
    state.groupData = Object.assign({}, state.groupData, data)
  }
}

const actions = {
  getNewNum (context, num) {
    context.commit(types.ADD_NUMBER, num)
  },
  groupData (context, data) {
    context.commit(types.GET_GROUP_DATA, data)
  }
}

export default {
  namespaced: true, // 用于在全局引用此文件里的方法时标识这一个的文件名
  state,
  getters,
  mutations,
  actions
}

在details.vue中的con1组件中添加一个按钮,为其添加一个点击事件, 给点击事件触发groupData方法

<template>
  <div class="con1">
    {{name}}
    <div class="groupid"
         @click="onLoad">
      list页获取异步接口数据{{user.groupId}}
    </div>
    <con2 v-bind="$attrs"
          v-on="$listeners"></con2>
    <div class="list1"></div>
  </div>
</template>

<script>
import con2 from './con2'
import { getGroupId } from '@/api/service'
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      msg: 'con1',
      user: {}
    }
  },
  inheritAttrs: false,
  props: ['name'],
  components: {
    con2
  },
  mounted () { },
  methods: {
    ...mapActions({
      groupData: 'detail/groupData'
    }),
    onLoad () {
      getGroupId({
        appSource: 'secoo',
        sku: 52606943,
        source: 1,
        upk: '18210001657400782F74E3AB7FD929AED59F0415135D5665089292C437542835ED117B6D94EBB9CC36B4A5D49D3504B36E3795727824DF877ED0633F6DCDF88DA0D3355E9ACD2A0B2F892115DF6D2755F3297F5E93659937491D26B687A507A85A74C272F7C69FB28536BD6B31EDC482F8B979377EA3A749C8BC'
      }).then(res => {
        this.user = Object.assign({}, this.user, res)
        this.groupData(res)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../assets/style/reset.scss';
html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}
#app {
  position: relative;
}
* {
  padding: 0;
  margin: 0;
}
.a {
  font-size: 40px;
}
.b {
  font-family: 'AlternateGothicEF-NoTwo';
  font-size: 40px;
}
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
button {
  width: 220px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 26px;
}
.groupid {
  width: 100%;
  height: 50px;
  background-color: #df8613;
  line-height: 50px;
  text-align: center;
  font-size: 26px;
  margin: 20px 0;
}
.list1 {
  width: 746px;
  height: 250px;
  background-color: red;
  border: 2px solid #000;
}
</style>

点击按钮即可发现加载异步数据

核心概念5: Modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const home = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const detail = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    home,
    detail
  }
})

store.state.home// -> home页面 的状态
store.state.detail // -> detail页面 的状态

改变state的时候使用mutation或者action中的方法也需要做一些修改：

//原来的
this.$store.commit('getGroupData');
this.$store.dispatch('etNewNum',5);
//修改后的
this.$store.commit('detail/getGroupData');
this.$store.dispatch('detail/getNewNum',5);

讲完这些基本概念之后再将一下这些属性的辅助函数：mapState, mapGetters, mapActions, mapMutations。

map映射函数

map映射函数	映射结果
mapState	将state映射到computed
mapActions	将actions映射到methods
mapGetters	将getters映射到computed

个人感觉，这些函数其实就是对state,gettters,mutations,actions的重命名而已。可以让你在写代码的时候少敲几个字母。在没有这些函数的时候。页面或者组件里使用state和getter需要this. $store.state.num还有this.$ store.getter.num.如果页面有很多个地方使用了state和getter会很麻烦。使用这些辅助函数可以解决这些问题。

使用时首先引入：

import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'

mapState：

他是对state的对象进行二次计算，他可以简化我们代码，这样我们获取a,不用写this.$store.state.a一大串了，尤其对于我们组件中用到次数挺多的情况下，我们完全可以用mapState来代替。
-需要在computed中使用mapState

computed: {
  ...mapState(['a', 'b']),
}

就可以代替这段代码：

computed: {
  a() {
    return this.$store.state.a
  },
  b() {
    return this.$store.state.b
  },
}

注意，如果a和b不是同一个文件下的属性，j假如a属于detail.b属于home.可以这么写：

computed: {
  ...mapState({
    a: state => state.detail.a
  }),
...mapState({
    a: state => state.home.b
  }),
}

使用方法：

this.a

官方的使用方法如下：

img_ccc7f93b277d85a17130b533a4090e8e.png

mapGetters

我们可以理解成他是和mapState一样，都是对state里面的参数进行计算，并返回相应的值，所以我们平常看到的mapState.mapGetters都是在computed属性里面，但是和mapState有点不同的是，mapState是仅对state里面的参数进行计算并返回，而mapGetters是对state参数派生出的属性进行计算缓存

在computed中添加count的映射：

computed: {
  ...mapGetters(['count'])
}

等价于：

computed: {
  count() {
    return this.$store.getters.count
  }
}

使用方法：

this.count

mapMutations

mapMutations是写在methods里面，因为他触发的是方法
在methods中添加映射

methods: {
 ...mapMutations({
      [types.ADD_CAR_NUM]: `home/${types.ADD_CAR_NUM}`,
      [types.REDUCE_CAR_NUM]: `home/${types.REDUCE_CAR_NUM}`
    }),
},

等价于：

methods: {
    this.$store.commit(`home/${types.ADD_CAR_NUM}`, n)
    this.$store.commit(`home/${types.REDUCE_CAR_NUM}`, n)
}

使用方法：

this[types.ADD_CAR_NUM]()
this[types.REDUCE_CAR_NUM]()

mapActions

mapAcions是写在methods里面，因为他触发的是方法
在methods中添加addA和addB的映射

methods: {
  ...mapActions({
    groupData: 'detail/groupData'
  }),
},

等价于：

methods: {
  addA(n) {
    this.$store.dispatch('detail/groupData', n)
  }
}

'groupData'是定义的一个函数别名称，挂载在到this(vue)实例上，

注意：'detail/groupData' 才是details页面actions里面函数方法名称。

调用的方法：

this.groupData(res)

至此，vuex中的常用的一些知识点使用算是简单的分享完了，当然了，相信这些只是一些皮毛！只能说是给予刚接触vuex的初学者一个参考与了解吧！有哪里不明白的或不对的，留言下，咱们可以一起讨论、共同学习！

Vuex 快速入门上手教程

一. 什么是Vuex?

二. 为什么要使用Vuex?

三.如何引入Vuex?

四. Vuex的核心概念?

核心概念1: State

核心概念2: Getters

核心概念3: Mutations

核心概念4: Actions

核心概念5: Modules

map映射函数

mapState：

mapGetters

mapMutations

mapActions

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端博文