Vuex入門到上手教程
一、前言
當(dāng)我們的應(yīng)用遇到多個組件共享狀態(tài)時,會需要多個組件依賴于同一狀態(tài)。傳參的方法對于多層嵌套的組件將會非常繁瑣,并且對于兄弟組件間的狀態(tài)傳遞無能為力。在搭建下面頁面時,你可能會對 vue 組件之間的通信感到崩潰 ,特別是非父子組件之間通信。此時就應(yīng)該使用vuex,輕松可以搞定組件間通信問題。
二、什么是Vuex
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。這里的關(guān)鍵在于集中式存儲管理。 這意味著本來需要共享狀態(tài)的更新是需要組件之間通訊的,而現(xiàn)在有了vuex,就組件就都和store通訊了 。
三、什么時候使用Vuex
雖然 Vuex 可以幫助我們管理共享狀態(tài),但也附帶了更多的概念和框架。這需要對短期和長期效益進(jìn)行權(quán)衡。 如果您的應(yīng)用夠簡單,您最好不要使用 Vuex,因?yàn)槭褂?Vuex 可能是繁瑣冗余的。一個簡單的global event bus就足夠您所需了。但是, 如果您需要構(gòu)建一個中大型單頁應(yīng)用,您很可能會考慮如何更好地在組件外部管理狀態(tài),Vuex 將會成為自然而然的選擇。
四、Vuex安裝(限定開發(fā)環(huán)境為 vue-cli)
首先要安裝vue-cli腳手架,對于大陸用戶,建議將npm的注冊表源設(shè)置為國內(nèi)的鏡像(淘寶鏡像),可以大幅提升安裝速度。
npm config set registry https://[registry.npm.taobao.org](http://registry.npm.taobao.org/) npm config get registry//配置后可通過下面方式來驗(yàn)證是否成功 npm install -g cnpm --registry=[https://registry](https://registry/).npm.taobao.org //cnpm安裝腳手架 cnpm install -g vue-cli vue init webpack my-vue cd my-vue cnpm install cnpm run dev
腳手架安裝好后,再安裝vuex
cnpm install vuex --save
五、如何使用Vuex
1.如何通過Vuex來實(shí)現(xiàn)如下效果?
①創(chuàng)建一個store.js文件
import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex) const store = new Vuex.Store({ state: { //這里的state必須是JSON,是一個對象 count: 1 //這是初始值 }, mutations: {//突變,羅列所有可能改變state的方法 add(state) { state.count++; //直接改變了state中的值,而并不是返回了一個新的state }, reduce(state){ state.count--; } } }); export default store;//用export default 封裝代碼,讓外部可以引用
②在main.js文件中引入store.js文件
import store from "./vuex/store" new Vue({ router, store, el: '#app', render: h => h(App) })
③新建一個模板count.vue
<template> <div> <h2>{{msg}}</h2><hr/> <h2>{{$store.state.count}}-{{count}}</h2>//這兩種寫法都可以 <button @click="addNumber">+</button> <button @click="reduceNumber">-</button> </div> </template> <script> import {mapState} from 'vuex' export default { data() { return { msg: "Hello Vuex" }; }, methods: { addNumber() { return this.$store.commit("add"); }, reduceNumber() { return this.$store.commit("reduce"); } }, computed: mapState(['count'])// 映射 this.count 到 this.$store.state.count mapState 函數(shù)可以接受一個對象,也可以接收一個數(shù)組 }; </script>
由于 store 中的狀態(tài)是響應(yīng)式的,當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候,若 store 中的狀態(tài)發(fā)生變化,那么相應(yīng)的組件也會相應(yīng)地得到高效更新。 在組件中調(diào)用 store 中的狀態(tài)簡單到僅需要在計(jì)算屬性中返回即可。改變store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutations。
這樣,我們就可以實(shí)現(xiàn)自增1或是自減1,那假如我們想要點(diǎn)擊一次實(shí)現(xiàn)自增2,這該如何實(shí)現(xiàn),也就是如何向Mutations傳值?
2.如何在Mutations里傳遞參數(shù)
先store.js文件里給add方法加上一個參數(shù)n
mutations: { add(state,n) { state.count+=n; }, reduce(state){ state.count--; } }
然后在Count.vue里修改按鈕的commit( )方法傳遞的參數(shù)
addNumber() { return this.$store.commit("add",2); }, reduceNumber() { return this.$store.commit("reduce"); }
3.getters如何實(shí)現(xiàn)計(jì)算過濾操作
getters從表面是獲得的意思,可以把他看作在獲取數(shù)據(jù)之前進(jìn)行的一種再編輯,相當(dāng)于對數(shù)據(jù)的一個過濾和加工。你可以把它看作store.js的計(jì)算屬性。
例如:要對store.js文件中的count進(jìn)行操作,在它輸出前,給它加上100。
首先要在store.js里Vuex.Store()里引入getters
getters:{ count:state=>state.count+=100 }
然后在Count.vue中對computed進(jìn)行配置,在vue 的構(gòu)造器里邊只能有一個computed屬性,如果你寫多個,只有最后一個computed屬性可用,所以要用展開運(yùn)算符”…”對上節(jié)寫的computed屬性進(jìn)行一個改造。
computed: { ...mapState(["count"]), count() { return this.$store.getters.count; } }
需要注意的是,此時如果點(diǎn)擊'+',就會增加102,如果點(diǎn)擊'-',就會增加99,最后的結(jié)果是mutations和getters共同作用的。
4.actions如何實(shí)現(xiàn)異步修改狀態(tài)
actions和上面的Mutations功能基本一樣,不同點(diǎn)是, actions是異步的改變state狀態(tài),而Mutations是同步改變狀態(tài) 。
①在store.js中聲明actions
actions: { addAction(context) { context.commit('add', 2);//一開始執(zhí)行add,并傳遞參數(shù)2 setTimeout(() => { context.commit('reduce') }, 2000);//兩秒后會執(zhí)行reduce console.log('我比reduce提前執(zhí)行'); }, reduceAction({ commit }) { commit('reduce') } }
actions是可以調(diào)用Mutations里的方法的,調(diào)用add和reduce兩個方法。在addAction里使用setTimeOut進(jìn)行延遲執(zhí)行。在actions里寫了兩個方法addAction和reduceAction,兩個方法傳遞的參數(shù)也不一樣。
context:上下文對象,這里你可以理解稱store本身。 {commit}:直接把commit對象傳遞過來,可以讓方法體邏輯和代碼更清晰明了
②模板中的使用
<p> <button @click="addNumber">+</button> <button @click="reduceNumber">-</button> </p> <p> <button @click="addAction">+</button>//新增 <button @click="reduceAction">-</button>//新增 </p>
import { mapState, mapGetters, mapActions } from "vuex"; methods:{ ...mapMutations([ 'add','reduce' ]), ...mapActions(['addAction','reduceAction']) }
最后得到如下效果:點(diǎn)擊addAction按鈕事件時,先累加2,兩秒后再減去1,而addNumber事件則不能實(shí)現(xiàn)異步效果。
ps:如果想訪問源代碼,請猛戳 git地址 。如果覺得對您有用,請給本文的github加個star,萬分感謝
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目網(wǎng)頁自適應(yīng)等比例放大縮小實(shí)例代碼
等比例縮放可以在不同的分辨率下都能夠一屏展示,不會有滾動條的問題,也不會有適配問題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目網(wǎng)頁自適應(yīng)等比例放大縮小的相關(guān)資料,需要的朋友可以參考下2022-11-11vue項(xiàng)目多租戶環(huán)境變量的設(shè)置
本文主要介紹了vue項(xiàng)目多租戶環(huán)境變量的設(shè)置,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04element ui 表格動態(tài)列顯示空白bug 修復(fù)方法
今天小編就為大家分享一篇element ui 表格動態(tài)列顯示空白bug 修復(fù)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue項(xiàng)目打包成exe可執(zhí)行文件的實(shí)現(xiàn)過程(無瑕疵,完美版)
突然接到公司需求,說客戶想讓我們把項(xiàng)目直接打包,所以下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包成exe可執(zhí)行文件的實(shí)現(xiàn)過程,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11實(shí)現(xiàn)Vue的markdown文檔可以在線運(yùn)行的方法示例
這篇文章主要介紹了實(shí)現(xiàn)Vue的markdown文檔可以在線運(yùn)行的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12