关于Vuex的理解和使用，全局共享数据

布满荆棘的人生 2022-12-27 07:42 262阅读 0赞

### 什么是Vuex？ ###

Vuex是一个全局共享数据的区域，相当于一个数据仓库；  
Vuex是为了保存 组件之间共享数据而诞生的，如果组件之间 有要共享的数据，可以直接挂载到Vuex上，而不必通过父子之间的传值；**私密的数据不需要放在Vuex上，只有共享的数据才有必要放在Vuex上**；

### 标题安装Vue？ ###

cnpm i vuex -S
    import Vuex from 'vuex'
    Vue.use(Vuex)
    new Vuex.store()  // 创建一个实例，得到一个数据仓库对象，如下
    var store = new Vuex.store({
    	state: {},    // 相当于vue 中的 data，专门用来存储数据
    	mutations: {}   // 相当于vue 中的 methods
    })
    store:store  // 在 vue 事例中挂载一下，名字一样 可以直接写成 store

### 在组件中使用stroe ###

this.$store.state.XXXX     // 这个只能访问 state 里面的数据

### 为什么不推荐直接操作state 的方法来传递数据？ ###

这样做可能会导致数据的紊乱，又不能查找出来是谁操作数据出现了紊乱。

### 所以使用 mutations(中间件) 中的方法来间接操作数据 ###

state: {
    	count:0
    }
    mutations: {
    	add(state) {   // 这个里面的参数 最多 只能传两个参数，第二个可以是自己给的参数
    		state.count++
    	}
    }
    this.$store.commit('add')

### 什么是getters？ ###

getters 和 state，mutations平级，他和vue中过滤器一样都不修改数据，只是给数据做了一层包装
    getters: {
    	potCount: function(state) {   // 谁调用它，就直接返回的是他return 后包装的结果
    		return '这个数据是：' + state.count  // 这个数据是双向绑定的，改变之后也会跟着改变
    	}
    }
    // 调用 getters 
    $store.getters.optCount

### 总结 ###

1，获取数据使用 this.$store.state.XXXX
    2，改变数据使用 mutations
    3，包装数据使用 getters
    4，可以通过mapState辅助函数将state和getters映射到当前组件的computed计算属性当中，获取数据，并且通过计算属性返回给组件使用。
    5，一些复用的ajax请求可以写在vuex的action中，用promise包装并用async await处理返回的数据