在Vue-cli里應(yīng)用Vuex的state和mutations方法
首先，必須安裝vuex的依賴
npm install vuex --save-dev
創(chuàng)建專屬vuex的文件夾和store.js:
store.js里引入并應(yīng)用插件vuex
定義常量state,用于存放變量&&定義常量mutations存放對變量的處理方法：
導(dǎo)出Vuex.store的實(shí)例，參數(shù)為剛才定義的state和mutations:
最后，還要在入口js文件引入到Vue的實(shí)例之中：
之后，我們就可以在組件當(dāng)中，調(diào)用到我們在vuex存放的變量和方法：
首先：在父組件調(diào)用變量headTitle:
需要用到計(jì)算屬性computed和vuex的mapState:(注釋的寫法也可以，但是mapState可以引入多個(gè)變量，比較方便)
這樣，頁面<h1>就會(huì)顯示我們保存的變量headTitle的值為“口袋香港”
之后，我嘗試在子組件，利用mutations的方法去改變headTitle的值：
結(jié)果，每次的改變，父組件的<h1>都會(huì)跟隨改變。
這就是vuex的小小的應(yīng)用實(shí)現(xiàn)。
以上這篇在Vue-cli里應(yīng)用Vuex的state和mutations方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue+高德地圖寫地圖選址組件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能的示例代碼
這篇文章主要介紹了vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
vue3圖片剪裁插件vue-img-cutter使用小結(jié)
Vue.js是一款流行的JavaScript前端框架,很受用戶喜愛,這篇文章主要介紹了vue3圖片剪裁插件vue-img-cutter使用小結(jié),本文結(jié)合示例代碼講解的非常詳細(xì),感興趣的朋友一起看看吧2024-01-01
這篇文章主要給大家介紹了關(guān)于vue中v-bind與v-model區(qū)別的相關(guān)資料,v-model和v-bind是Vue.js框架中的兩個(gè)常用指令,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vscode 開發(fā)Vue項(xiàng)目的方法步驟
這篇文章主要介紹了vscode 開發(fā)Vue項(xiàng)目的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
vue,angular,avalon這三種MVVM框架優(yōu)缺點(diǎn)
本文給大家具體分析了下vue,angular,avalon這三種MVVM框架優(yōu)缺點(diǎn)，十分的細(xì)致全面，有需要的小伙伴可以參考下2016-04-04
el-descriptions引入代碼中l(wèi)abel不生效問題及解決
這篇文章主要介紹了el-descriptions引入代碼中l(wèi)abel不生效問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vue - props 聲明數(shù)組和對象操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue過濾器filters的用法及時(shí)間戳轉(zhuǎn)換問題
Vue的filters過濾器是比較常見的一個(gè)知識(shí)點(diǎn)，下面我將結(jié)合時(shí)間戳轉(zhuǎn)換的例子帶你快速了解filters的用法，感興趣的朋友一起看看吧2021-09-09
vue-cli3項(xiàng)目生產(chǎn)和測試環(huán)境分包后文件名和數(shù)量不一致解決
這篇文章主要為大家介紹了vue-cli3項(xiàng)目生產(chǎn)和測試環(huán)境分包后文件名和數(shù)量不一致解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05