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

1. Vuex是什么？

　　是Vue官方推薦的數(shù)據(jù)框架，就是單向數(shù)據(jù)的改變流程

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

2. Vuex流程圖

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

state中存放所有的公用數(shù)據(jù)，組件中使用公用數(shù)據(jù)可以直接調(diào)用state；

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

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

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

組件先去調(diào)用actions，actions再去調(diào)用mutations，最終改變state的值，也可以略過actions，直接調(diào)用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中調(diào)用state中數(shù)據(jù)

<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

?

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。