关于vuex，前端必会

什么是vuex？

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

简单来说 vuex 就是把需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层组件中供其他组件使用，它是另一种意义上的变量提升。

也就是说vuex是把vue项目中的公用的数据放在一块供所有组件使用，起到管理全局变量的作用。

vuex如何管理数据的？

vuex存在5个属性：

• state 存放状态
• mutations state成员操作
• getters 加工state成员给外界
• actions 异步操作
• modules 模块化状态管理
  Vuex官网给出的流程图

流程图中可以看出vuex是单项数据流，当我们在组件中想要操作vuex中state存放的数据，不支持直接对state数据进行操作，而是通过提交（commit）Mutations中的方法对state存放的数据进行操作。然后state中的数据经过修改后再渲染到组件中。

具体用法：
Mutations使用方法：

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

Vue.use(Vuex)

const store = new Vuex.store({
    state:{
        name:'Tom'
    },
    mutations:{
        //es6语法，等同edit:funcion(){...}
        edit(state){
            state.name = 'jack'
        }
    }
})

export default store

在vue组件中调用：

this.$store.commit('edit')

Mutation传参数

this.$store.commit('edit',15)

接收参数

 edit(state,age){
            state.name = 'jack'
            console.log(age) // 15
        }

Actions使用方法：
组件中通过派发（dispatch）Actions中的方法调用Mutation中的函数对state进行操作。

actions:{
    aEdit(context,payload){
        setTimeout(()=>{
            context.commit('edit',payload)
        },2000)
    }
}

在组件中调用：

this.$store.dispatch('aEdit',{age:15})

Getters：可以对state中的成员加工后传递给外界
这个属性相当于一个加工厂，将state中数据进行处理加工，然后就可以调用处理好的数据让组件去使用

getters:{
    nameInfo(state){
        return "姓名:"+state.name
    },
    fullInfo(state,getters){
        return getters.nameInfo+'年龄:'+state.age
    }  
}

组件中调用

this.$store.getters.fullInfo

剩下的Models就不介绍了，不是用太多

vuex存在的问题

项目中使用vuex给我们带来了很大的方便。
在使用vuex的项目中，我们刷新页面（或者F5刷新）项目中往往会出现bug，一般都是获取vuex中的satate数据为null。也就是说刷新页面会重置vuex中的内容，在组件重新渲染数据时找不到刷新前的数据了。
个人观点，如果想保持数据刷新页面还存在，可以使用localStorage存储，不过要注意数组大小。而vuex用作兄弟组件之间相互使用数据比较好。
okkkkkk，欢迎交流指点。