Vuex 的應(yīng)用

要想使用vuex 第一步要先安裝vuex

命令行 : npm i vuex -S?

安裝后 在 src? 目錄下創(chuàng)建一個(gè)store 用來更改數(shù)據(jù)蚣驼,在文件夾下面創(chuàng)建兩個(gè)文件一個(gè)是index.js 文件 ,用來導(dǎo)出凿歼。

另一個(gè)是state 用來定義和管理數(shù)據(jù)


index用來導(dǎo)出數(shù)據(jù)畸陡,state用來定義數(shù)據(jù)

在index.js 中引入Vue 和 Vuex

同時(shí)引入本地的state


引入Vue? 用Vue.use(Vuex) 來調(diào)用他

創(chuàng)建好store后 需要在main.js 中引入store 并將store寫入vue實(shí)例中


在main.js 中引入store?

然后可以直接在自己的要顯示的 界面中用到store里的state 我在這里用Home.vue

當(dāng)我們?cè)赾omputed 中寫count 方法的時(shí)候 this.$store.state.count 的值就是我們?cè)趕tate中定義的count??

要想讀取到this count 不可以寫成箭頭函數(shù) 必須寫成 count () { }

在vuex 中自帶的mapState 可以直接返回?cái)?shù)據(jù)。 用 ...mapState(['count'])

此時(shí)需要在用到的頁面從vuex中引入mapState

讀取到state中的 數(shù)據(jù)

在數(shù)據(jù)修改的時(shí)候有多種方式,函數(shù)可以直接寫在Home.js 中 還可以寫在store中

?在vuex 有一個(gè) mutations?

在vuex嚴(yán)格模式下唯一可以修改state值的地方

用來寫方法失晴。 將從state讀出的數(shù)據(jù)直接在mutations中來進(jìn)行修改并且返回。?


在store 的 index.js 文件中寫的mutation


要調(diào)用的時(shí)候可以在 Home.vue 的methods 中添加一個(gè)add () {}方法? 用

this.$store.commit('inc') 來綁定? 這是手動(dòng)綁定 在react 中可以自動(dòng)綁定拘央。但是vue 不可以 自動(dòng)綁定

這句話也可以改成?

...mapMutation['inc'] 里面是字符串


這是引用的兩種方式

當(dāng)在組件中 onclick中調(diào)用的時(shí)候 可以用 @click.native = "inc()"?

后面可以寫括號(hào)涂屁,并且可以傳遞參數(shù),會(huì)傳遞給mutations 方法的 第二參數(shù)

mutations 中的方法最多有兩個(gè)參數(shù)?

第一個(gè)就是state?

第二個(gè)就是傳遞進(jìn)來的參數(shù)灰伟。如果要傳遞多個(gè)參數(shù) 應(yīng)該使用對(duì)象的方式傳遞拆又。

多寫的參數(shù)不識(shí)別

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市栏账,隨后出現(xiàn)的幾起案子帖族,更是在濱河造成了極大的恐慌,老刑警劉巖挡爵,帶你破解...
    沈念sama閱讀 206,311評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件竖般,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡茶鹃,警方通過查閱死者的電腦和手機(jī)涣雕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門艰亮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人胞谭,你說我怎么就攤上這事垃杖。” “怎么了丈屹?”我有些...
    開封第一講書人閱讀 152,671評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵调俘,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我旺垒,道長(zhǎng)彩库,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評(píng)論 1 279
  • 正文 為了忘掉前任先蒋,我火速辦了婚禮骇钦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘竞漾。我一直安慰自己眯搭,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評(píng)論 5 371
  • 文/花漫 我一把揭開白布业岁。 她就那樣靜靜地躺著鳞仙,像睡著了一般。 火紅的嫁衣襯著肌膚如雪笔时。 梳的紋絲不亂的頭發(fā)上棍好,一...
    開封第一講書人閱讀 49,031評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音允耿,去河邊找鬼借笙。 笑死,一個(gè)胖子當(dāng)著我的面吹牛较锡,可吹牛的內(nèi)容都是我干的业稼。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼蚂蕴,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼低散!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起掂墓,我...
    開封第一講書人閱讀 36,973評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤谦纱,失蹤者是張志新(化名)和其女友劉穎看成,沒想到半個(gè)月后君编,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡川慌,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評(píng)論 2 323
  • 正文 我和宋清朗相戀三年吃嘿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了祠乃。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,039評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡兑燥,死狀恐怖亮瓷,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情降瞳,我是刑警寧澤嘱支,帶...
    沈念sama閱讀 33,701評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站挣饥,受9級(jí)特大地震影響除师,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜扔枫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評(píng)論 3 307
  • 文/蒙蒙 一汛聚、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧短荐,春花似錦倚舀、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至讶踪,卻和暖如春芯侥,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背乳讥。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工柱查, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人云石。 一個(gè)月前我還...
    沈念sama閱讀 45,497評(píng)論 2 354
  • 正文 我出身青樓唉工,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親汹忠。 傳聞我的和親對(duì)象是個(gè)殘疾皇子淋硝,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 使用說明-Vuex 安裝 直接下載 / CDN 引用 Unpkg.com 提供了基于 NPM 的 CDN 鏈接。以...
    滿是裂縫的花卷閱讀 987評(píng)論 0 8
  • 姓名:岳沁 學(xué)號(hào):17101223458 轉(zhuǎn)載自:http://blog.csdn.net/h5_queensty...
    丘之心閱讀 2,130評(píng)論 0 1
  • 安裝 npm npm install vuex --save 在一個(gè)模塊化的打包系統(tǒng)中宽菜,您必須顯式地通過Vue.u...
    蕭玄辭閱讀 2,926評(píng)論 0 7
  • vuex 場(chǎng)景重現(xiàn):一個(gè)用戶在注冊(cè)頁面注冊(cè)了手機(jī)號(hào)碼谣膳,跳轉(zhuǎn)到登錄頁面也想拿到這個(gè)手機(jī)號(hào)碼,你可以通過vue的組件化...
    sunny519111閱讀 8,008評(píng)論 4 111
  • vuex是一個(gè)狀態(tài)管理模式铅乡,通過用戶的actions觸發(fā)事件继谚,然后通過mutations去更改數(shù)據(jù)(你也可以說狀態(tài)...
    Ming_Hu閱讀 2,016評(píng)論 3 3