成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vuex10分鐘入門

idisfkj / 2440人閱讀

摘要：它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。寫需要的組件創(chuàng)建一個(gè)組件，懟下面的內(nèi)容，你喜歡彬哥哪一點(diǎn)創(chuàng)建一個(gè)展示組件我喜歡彬哥打開，刪掉沒用的東西，直接懟下面的代碼，到這里，架子就搭好了。

通過本文你將：

1.知道什么是Vuex.

2.知道為什么要用Vuex.

3.能跑一個(gè)Vuex的例子。

4.了解相關(guān)概念，面試的時(shí)候能說出一個(gè)所以然

5.項(xiàng)目中用Vuex知道該學(xué)什么東西。

好，走起。

1.什么是VueX?

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

翻譯成人話，Vuex是vuejs的官方管理數(shù)據(jù)狀態(tài)的庫。

官網(wǎng)：https://vuex.vuejs.org/zh/

2.為什么用它？

舉個(gè)例子，

你用vue開發(fā)一個(gè)app，

不同的組件，你都需要用戶信息，還有一些公用的數(shù)據(jù)，你每一個(gè)組件請(qǐng)求一遍浪費(fèi)性能，你不請(qǐng)求組件間屬性和參數(shù)傳來傳去，你自己維護(hù)很墨跡，麻煩也容易出錯(cuò)。好吧，你覺得干不好或者麻煩，那么vueX幫你解決這個(gè)事兒。

這個(gè)沒什么復(fù)雜的，大學(xué)圖書館，自助借還書，每次都把書亂放，維護(hù)很麻煩，怎么辦，都還給圖書館管理員，圖書館管理員統(tǒng)一管理調(diào)配。ok，圖書管理員就是VueX.

3.怎么用？

1.安裝

npm install vuex --save

2.初始化store.js，

（vue-cli安裝項(xiàng)目目錄不墨跡），

一般放到src/store/store.js下面，初始化代碼,相當(dāng)于搞了一個(gè)圖書管理員。

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export const store = new Vuex.Store({})

3.寫需要的組件

創(chuàng)建一個(gè)Form.vue組件，懟下面的內(nèi)容，

創(chuàng)建一個(gè)展示組件Display.vue

打開App.vue，刪掉沒用的東西，直接懟下面的代碼，

到這里，架子就搭好了。

4.增加各種需要的東西，

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    love: ""
  },
  mutations: {
    change(state, love) {
      state.love = love
    }
  },
  getters: {
    love: state => state.love
  }
})

這里注意，你不用去管

這些破概念，你就照貓畫虎，我寫啥你抄啥，抄幾遍，你就知道數(shù)據(jù)流向了。你不知道鼠標(biāo)叫mouse，也不影響你玩電腦。

love就是你喜歡我的東西，相當(dāng)于一個(gè)變量，被傳來傳去的一會(huì)。

好了，就這么簡單可以用了。

4.使用VueX

打開main.js，導(dǎo)入，然后用。

import { store } from "./store/store"

new Vue({
  el: "#app",
  store,
  components: { App },
  template: ""
})

到這里就相當(dāng)于圖書管理員上崗等著學(xué)生來還書了,來啊，互相傷害??！

5.我來了……

既然搞數(shù)據(jù)，躲不開剛才我們的搞的表單組件，打開Form.vue

打開，Display.vue

漂亮，如果你運(yùn)行成功，你就會(huì)發(fā)現(xiàn)，頁面里面出現(xiàn)，我喜歡彬哥：離我遠(yuǎn)一點(diǎn)。

告辭！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102369.html

相關(guān)文章

  • 【Copy攻城獅日志】CML之5分鐘入門多端統(tǒng)一框架

    摘要：開局一張圖，故事全靠編是啥變色龍又是啥自從有小程序以來，小程序的第三方框架便孕育而生，從原始時(shí)代的只基于微信小程序多如今多端統(tǒng)一開發(fā)框架，可以說前端技術(shù)從年到年又發(fā)生了天翻地覆的變化。 Created 2019-4-6 21:57:17 by huqi Updated 2019-4-7 22:54:55 by huqi showImg(https://segmentfault.c...

    MycLambert 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    khs1994 評(píng)論0 收藏0

  • vuex入門案例

    摘要：說到老四了，最苦逼的家伙了，活都讓他干了，活總得干完一個(gè)說一個(gè)吧，所以他基本上同步進(jìn)行的。 前言 這次發(fā)表的項(xiàng)目，這對(duì)我來說是一場革命。記錄著第一次GitHub發(fā)布項(xiàng)目，記錄著最初學(xué)習(xí)vuex的頭昏腦脹，也記錄著懷揣對(duì)react的一腔熱血后卻步履闌珊后，再次回看vue時(shí)那種感覺。所以說這個(gè)項(xiàng)目對(duì)我很有意思，麻雀雖小，五臟俱全。 在寫這個(gè)項(xiàng)目之前，我正在試水react，那種函數(shù)式編程+j...

    roundstones 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<