1. 创建新分支city-vuex
并拉到线下,切换到新分支上:
然后重启服务器。
2. 我们要实现的功能是点击城市选择页面的城市时,首页右上角的城市会随之切换到相同的城市:
这就意味着首页和城市选择页面要共享一些数据,或者说城市选择页面要传送一些数据给首页,即City.vue
和Home.vue
要共用一些数据,但是这两个组件没有一个共用的父子组件,就不能用之前的方法:
3. Vuex
Vuex
是一个vue
官方推荐的数据框架,在vue
的大型项目开发之中,vue
只能承担视图层的内容,当我们涉及到大量数据传递的时候,往往都需要一个数据框架进行辅助,在vue
之中,这个数据框架就是vuex
是一个vue
官方推荐的数据框架,在vue
的大型项目开发之中,vue
只能承担视图层的内容,当我们涉及到大量数据传递的时候,往往都需要一个数据框架进行辅助,在vue
之中,这个数据框架就是vuex
Vuex
的设计理念:
当我们的项目之中各个页面或者是各个组件之中之间进行复杂的数据传值很困难的时候,我们希望能把这些公用的数据放在一个公共的存储空间去存储,然后某一个组件改变了这个公共的数据,其他的组件就能感知到。
Vuex
是指右侧绿色的虚线区域,所有公共的数据都是放在state
里的,组件想用一个公用的数据,直接去调用state
就可以了。有的时候我们希望去改变公用数据,但是不能直接用组件改变,要走左侧这个流程,如果我有一些异步操作,那么我把这些异步操作放在actions
这里,或者是一些复杂的批量的同步操作,也可以放在actions
里。组件先去调用actions
,紧接着再去调用mutations
,mutations
放的是一个一个同步的对state
的修改。有的时候我们也可以越过actions
,直接让组件调用mutations
修改state
里面的数据。要注意的是,组件通过一个dispatch
方法调用actions
,通过方法commit
来调用mutations
。
4. 步骤
- 先要安装
vuex
:先要安装vuex
:
然后重启服务器。 - 在
main.js
中引入vuex
这样做有些不合适,因为后面要做的vuex
文件夹还是比较复杂的。一般做法是我们在src
下面创建一个store
的文件夹,然后在store
中创建一个index.js
文件: - 在
index.js
中引入Vue
和Vuex
,在Vue
中使用插件都是通过Vue.use()
,然后我们带出一个由vuex
创建的一个仓库,仓库里面一般有一个state
的内容,存放的是全局共用的数据:
然后在main.js
中导入store
这个文件夹,