vuex究竟是个啥

vuex总结

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

上面是官网对vuex的解释，然而仍是不能确切知道vuex是什么，下面我就来讲一下我对vuex的理解以及在使用过程当中的心得体会。

vuex就像一个无形的仓库，公共的状态咱们会抽离出来放进里面。vuex的核心主要包括如下几个部分

• state
• mutations
• getters
• actions
• modules
  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来触发
而后咱们来实现侧边栏的点击显示
咱们在header.vue中这样写

<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项目，能够试着本身总结下。这个项目必定会让你学到不少的。