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