前言：最近在做Vue實現去哪網，想要實現在城市列表頁面，點擊某個城市的時候，主頁的頭部的城市會隨著改變，就是首頁和城市頁面有共用的數據要分享，這里使用Vuex

1. Vuex是什么？

　　是Vue官方推薦的數據框架，就是單向數據的改變流程

　　Vuex的設計理念：當項目中需要多個組件的復雜傳值困難時，如果把公用的數據放到一個公共空間去存儲，有一個組件改變了公共的數據，其他組件就能感知到

2. Vuex流程圖

圖中虛線部分是一個store倉庫，由state actions mutations三部分組成，

state中存放所有的公用數據，組件中使用公用數據可以直接調用state；

actions中存放異步操作或者批量的同步操作；

mutations中存放一個個同步的對state的修改

想要改變state的數據，不能直接讓組件去改變公用數據，必須走一個流程，

組件先去調用actions，actions再去調用mutations，最終改變state的值，也可以略過actions，直接調用mutations

?

3. Vuex的使用

第一步：安裝 npm install vuex --save

第二步：在main中引入vuex，這里把vuex放在了一個單獨的文件夾store中

文件store/index.js

import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex) export default new Vuex.Store({state: {city: '北京'} })

主頁的Header.vue中調用state中數據

<router-link to="/city"><div class="header-right">{{this.$store.state.city}}<span class="iconfont arrow-icon">&#xe6aa;</span></div> </router-link>

list列表頁綁定一個點擊事件

store/index.js

?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的Vuex的第一次接触的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。