Vue 项目中vuex 的使用问题小结

vuex使用场景

在我的旅行网站项目中需要实现这样一个功能，即在城市选择页单击某一城市，完成选择，当前城市发生改变，首页中右上角的城市也随之变化。这一功能就要求首页中与城市选择页中的数据进行共享。即组件间传值。组件间传值问题可以分为父子组件传值，兄弟组件传值，然而在我的项目中组件之间并没有共有的父组件也并非父子组件，因而，要进行多个页面/组件间的复杂传值，想用简单的组件传值是行不通的。

vuex 的原理实现

我们可以这样想，把所需要的公共数据放在一个数据库内，方便所有的组件来对数据进行调用，同时，当组件中发生内容的变化，公共数据也随之改变，其他组件内的数据也感知到并且更新。
vue中就为我们提供了vuex这样一个数据层框架。
官方是这样定义vuex的：

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

我们参考这张图
虚线部分就是vuex了，它实际上相当于一个公共数据存储区并能完成一些共享功能。它包含了几大核心，包括图中出现的actions，mutations，state等。那么我们刚才说到要对公共数据进行存储，这些数据就存储在state中，组件中的数据就来源于state，并且当某个组件中的数据改变，需要经过上图这样一个流程，经过action，mutation，state，最终传递个所有需要这个数据的组件，完成数据的更新，例如城市选择页中当前城市改变，需要经过这样一个过程，让所有包含这个城市数据的组件中感知刷新数据。

代码实现

在src目录下创建store建立state仓库，接着在main.js实例和子组件中引入store，import store from ‘./store’ 这样数据才能派送到每个子组件中去。

接着就是在子组件中取数据，在首页及城市选择页使用this.$store.city 取出state中的数据。以上完成了从state到vue componens的过程。

那么加入组件中的数据改变了，应该怎么办，即我们切换城市，让其他组件中数据刷新。
首先，在子组件数据改变会调用dispatch方法，传递给action，因此，我们需要在子组件中绑定点击事件，在子组件的方法中给绑定事件调用这个dispatch方法，然后在store中创建action用来接收dispatch，action使用commit来提交到mutation，mutation去改变公共数据

@handlecityclick(city){
this.$store.dispatch('changecity'),city
}// changecity是方法名，city是传递的参数

//在vuex.store创建action并接收dispatch
changecity(ctx,city) {
ctx.commit('changecity',city)
}

//在vuex.store中的mutation改变数据

changecity(state,city) {
state.city = city;
}

至此，完成了数据更新。

性能优化

当前并无异步操作和批量操作，因此可以跳过action，在子组件中将dispatch方法改为commit提交到mutation即可。

如有不足之处，欢迎批评指正。