在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存放對(duì)變量的處理方法：
導(dǎo)出Vuex.store的實(shí)例，參數(shù)為剛才定義的state和mutations:
最后，還要在入口js文件引入到Vue的實(shí)例之中：
之后，我們就可以在組件當(dāng)中，調(diào)用到我們?cè)趘uex存放的變量和方法：
首先：在父組件調(diào)用變量headTitle:
需要用到計(jì)算屬性computed和vuex的mapState:(注釋的寫法也可以，但是mapState可以引入多個(gè)變量，比較方便)
這樣，頁(yè)面<h1>就會(huì)顯示我們保存的變量headTitle的值為“口袋香港”
之后，我嘗試在子組件，利用mutations的方法去改變headTitle的值：
結(jié)果，每次的改變，父組件的<h1>都會(huì)跟隨改變。
這就是vuex的小小的應(yīng)用實(shí)現(xiàn)。
以上這篇在Vue-cli里應(yīng)用Vuex的state和mutations方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue項(xiàng)目中添加高德地圖,對(duì)開(kāi)發(fā)地圖的開(kāi)發(fā)人員有一定幫助,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用高德地圖的超詳細(xì)步驟,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue實(shí)現(xiàn)密碼顯示隱藏切換功能,需要的朋友可以參考下2018-02-02
vue-cli項(xiàng)目無(wú)法用本機(jī)IP訪問(wèn)的解決方法
今天小編就為大家分享一篇vue-cli項(xiàng)目無(wú)法用本機(jī)IP訪問(wèn)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vant-ui框架的一個(gè)bug(解決切換后onload不觸發(fā))
這篇文章主要介紹了vant-ui框架的一個(gè)bug(解決切換后onload不觸發(fā))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue.js前端網(wǎng)頁(yè)彈框異步行為示例分析
這篇文章主要為大家介紹了vue.js前端網(wǎng)頁(yè)彈框異步的行為示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助祝大家多多進(jìn)步，早日升職加薪2021-11-11
Vue-loader 是 Webpack 的加載模塊，它使我們可以用 Vue 文件格式編寫單文件組件。這篇文章主要介紹了Vue.js的高級(jí)面試題以及答案,需要的朋友可以參考下2020-01-01
vue3 watch和watchEffect的使用以及有哪些區(qū)別
這篇文章主要介紹了vue3 watch和watchEffect的使用以及有哪些區(qū)別，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家介紹了vue?指令版富文本溢出省略截取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue級(jí)聯(lián)選擇器的getCheckedNodes使用方式
這篇文章主要介紹了vue級(jí)聯(lián)選擇器的getCheckedNodes使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要給大家介紹了關(guān)于vue使用dagre-d3畫流程圖的完整代碼,dagre-d3.js是一個(gè)用于在Vue.js框架中實(shí)現(xiàn)DAG（有向無(wú)環(huán)圖）可視化的庫(kù),它結(jié)合了vue.js、dagre和d3.js這三個(gè)庫(kù)的功能,需要的朋友可以參考下2024-02-02