state和mutations方法怎么在Vue-cli中使用

發(fā)布時(shí)間：2021-05-20 16:06:10 來(lái)源：億速云閱讀：108 作者：Leah 欄目：web開(kāi)發(fā)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)state和mutations方法怎么在Vue-cli中使用，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

首先，必須安裝vuex的依賴(lài)

npm install vuex --save-dev

創(chuàng)建專(zhuān)屬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:(注釋的寫(xiě)法也可以，但是mapState可以引入多個(gè)變量，比較方便)

這樣，頁(yè)面<h2>就會(huì)顯示我們保存的變量headTitle的值為“口袋香港”

之后，我嘗試在子組件，利用mutations的方法去改變headTitle的值：

結(jié)果，每次的改變，父組件的<h2>都會(huì)跟隨改變。

上述就是小編為大家分享的state和mutations方法怎么在Vue-cli中使用了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡