Vue（三）：vuex是什么

vuex官网介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

vuex通俗理解

vuex就像一个无形的仓库，公共的状态我们会抽离出来放进里面。

vuex的核心主要包括以下几个部分

state：存放的我们上面所提到的状态

mutations：存放如何更改状态

getters：从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态

actions：是mutation的加强版，它可以通过commit mutations中的方法来改变状态，最重要的是它可以进行异步操作。

modules：当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。

下面我们使用vuex来做一个小功能

安装vuex

cnpm install vuex --save-dev

那么如何使用呢？

我们以一个vue项目来说明下

卖座电影

 

首先我们需要在type.js中定义mutations事件类型，比如改变左侧侧边栏的状态。type.js如下

export const CHANGE_LEFTNAV_STATUS = 'CHANGE_LEFTNAV_STATUS

我们的sidebar.vue组件刚开始是看不到的，只有点击头部菜单的按钮才会出现，所以一开始这个侧边组件会有一个初始状态，我们可以这样去写

<div class="sidebar-container" @click='hideNav' v-show="show">

然后我们在计算属性中这样写

show:function(){
    return this.$store.getters.leftNavState
}

由于我们在vue实例中注入了vuex 所以我们可以通过this.$store来访问需要的仓库，我们在com.js中这样写

import * as types from '../types'
/**
 * App通用配置
 */
const state = {
 
    leftNavState:false
}

const actions = {
    
    //左侧导航栏的开关
    changeLeftNavState({commit},status){
        commit(types.CHANGE_LEFTNAV_STATUS,status)
    }
}
const getters = {
   
    leftNavState: state => state.leftNavState
}
const mutations = {
    [types.CHANGE_LEFTNAV_STATUS](state,status){
        state.leftNavState = status
    }
}

export default {
    state,
    actions,
    getters,
    mutations
}

当访问this.$store.getters.leftNavState我们会得到它的值state=>state.leftNavState相当于传入state参数，返回state.leftNavState的值，由于我们在state中声明了leftNavState：false所以this.$store.getters.leftNavState得到的值为false所以就不会看到侧边栏组件，当然当你改成true的时候就会看到了。

这里需要说明一个一个完整的module 需要包括四个部分state,getters actions mutations,state来存放需要操作的状态 gettes类似于计算属性，改变数据有只能通过提交到mutations方式，一种是异步的，定义在actions然后提交到mutation,通过dispach来分发，另外一种是同步的直接通过commit来触发
然后我们来实现侧边栏的点击显示

我们在head

 

<a class="go-menu" @click="showNav"><i class="icon iconfont icon-menu"></i></a>

然后在methods中这样写

showNav: function () {
      return this.$store.dispatch('changeLeftNavState', true)
    }

正如上面所说异步的点击事件定义在actions中通过dispach分发，所以this.$store.dispatch会唤醒定义在actions中的方法

 changeLeftNavState({commit},status){
        commit(types.CHANGE_LEFTNAV_STATUS,status)
    }
    //actions中的事件需要提交到mutations
    const mutations = {
    [types.CHANGE_LEFTNAV_STATUS](state,status){
        state.leftNavState = status
    }

这样仓库中的state.leftNavState的值就变成了你传入的值true。从而我们就看到了侧边栏组件
同样道理我们如果要点击隐藏这个组件那么就在sidebar.vue中这样写

<div class="sidebar-container" @click='hideNav' v-show="show">

然后我们在methods中这样写

methods:{
        hideNav(){
            this.$store.dispatch('changeLeftNavState',false)
        }
    }

这样我们就利用vuex完成了一个点击事件类型.

具体vuex到底是如何使用的，还是需要大家自己去看文档摸索的。任何项目都可以看做一个公式在我看来，我们不需要死机公式，我们要理解这个公式，这个公式就像一条线，能让我们一提起来vue就知道如何快速构建和实现一个vue项目，可以试着自己总结下。