摘要:但是時(shí)間匆忙沒(méi)有接觸到,今天閑暇時(shí)看了解了一下,并做了一個(gè)小,用于記錄的簡(jiǎn)單使用過(guò)程。在中引入在組件中使用在組建可以通過(guò)獲得狀態(tài)更改狀態(tài)只能以提交的方式。這里當(dāng)然并沒(méi)有完全發(fā)揮出全部的,還在學(xué)習(xí)中,寫這篇文章主要是記錄其簡(jiǎn)單的使用過(guò)程。
前一段時(shí)間因?yàn)樾枰褂胿ue,特地去學(xué)習(xí)了一下。但是時(shí)間匆忙vuex沒(méi)有接觸到,今天閑暇時(shí)看了解了一下vuex,并做了一個(gè)小demo,用于記錄vuex的簡(jiǎn)單使用過(guò)程。
什么是Vuex?vuex是專門為vue.js應(yīng)用程序開發(fā)的一種狀態(tài)管理模式,當(dāng)多個(gè)視圖依賴于同一個(gè)狀態(tài)或是多個(gè)視圖均可更改某個(gè)狀態(tài)時(shí),將共享狀態(tài)提取出來(lái),全局管理。
下面是一個(gè)計(jì)數(shù)器的例子在src目錄下創(chuàng)建一個(gè)store文件夾。
src/store.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0,
show: ""
},
getters: {
counts: (state) => {
return state.count
}
},
mutations: {
increment: (state) => {
state.count++
},
decrement: (state) => {
state.count--
},
changTxt: (state, v) => {
state.show = v
}
}
})
export default store
state就是我們的需要的狀態(tài),狀態(tài)的改變只能通過(guò)提交mutations,例如:
handleIncrement () {
this.$store.commit("increment")
}
帶有載荷的提交方式:
changObj () {
this.$store.commit("changTxt", this.obj)
}
當(dāng)然了,載荷也可以是一個(gè)對(duì)象,這樣可以提交多個(gè)參數(shù)。
changObj () {
this.$store.commit("changTxt", {
key:""
})
}
在main.js中引入store.js
import store from "./store/store"
export default new Vue({
el: "#app",
router,
store,
components: {
App
},
template: ""
})
在組件中使用
在組建可以通過(guò)$store.state.count獲得狀態(tài)
更改狀態(tài)只能以提交mutation的方式。
到這里這個(gè)demo就結(jié)束了,
感覺(jué)整個(gè)個(gè)過(guò)程就是一個(gè)傳輸數(shù)據(jù)的過(guò)程,有點(diǎn)類似全局變量,但是vuex是響應(yīng)式的。
這里當(dāng)然并沒(méi)有完全發(fā)揮出全部的vuex,
vuex還在學(xué)習(xí)中,寫這篇文章主要是記錄其簡(jiǎn)單的使用過(guò)程。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/97111.html
摘要:說(shuō)實(shí)在話,我在閱讀文檔的時(shí)候,也很難以去理解,甚至覺(jué)得沒(méi)有使用它我也可以。介紹那么到底是什么引用官網(wǎng)的說(shuō)法就是是一個(gè)專為應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。 前言 先說(shuō)句前話,如果不是接觸大型項(xiàng)目,不需要有多個(gè)子頁(yè)面,不使用vuex也是完全可以的。 說(shuō)實(shí)在話,我在閱讀vuex文檔的時(shí)候,也很難以去理解v...
摘要:說(shuō)實(shí)在話,我在閱讀文檔的時(shí)候,也很難以去理解,甚至覺(jué)得沒(méi)有使用它我也可以。介紹那么到底是什么引用官網(wǎng)的說(shuō)法就是是一個(gè)專為應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。 前言 先說(shuō)句前話,如果不是接觸大型項(xiàng)目,不需要有多個(gè)子頁(yè)面,不使用vuex也是完全可以的。 說(shuō)實(shí)在話,我在閱讀vuex文檔的時(shí)候,也很難以去理解v...
摘要:說(shuō)實(shí)在話,我在閱讀文檔的時(shí)候,也很難以去理解,甚至覺(jué)得沒(méi)有使用它我也可以。介紹那么到底是什么引用官網(wǎng)的說(shuō)法就是是一個(gè)專為應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。 前言 先說(shuō)句前話,如果不是接觸大型項(xiàng)目,不需要有多個(gè)子頁(yè)面,不使用vuex也是完全可以的。 說(shuō)實(shí)在話,我在閱讀vuex文檔的時(shí)候,也很難以去理解v...
摘要:簡(jiǎn)單點(diǎn)說(shuō),當(dāng)你使用構(gòu)造函數(shù),它實(shí)際上做了這么幾件事,首先定義給實(shí)例定義一些內(nèi)部屬性,之后就是綁定和的上下文對(duì)象永遠(yuǎn)是實(shí)例上,之后根據(jù)傳入的充實(shí)內(nèi)部狀態(tài)等等。函數(shù)執(zhí)行的結(jié)果是返回一個(gè)對(duì)象,屬性名對(duì)應(yīng)于傳入的對(duì)象或者數(shù)組元素。 轉(zhuǎn)載請(qǐng)注明出處 https://segmentfault.com/a/11... vuex2.0 和 vuex1.x 相比,API改變的還是很多的,但基本思想沒(méi)什么...
摘要:一基礎(chǔ)學(xué)習(xí)模式下圖不僅概括了模式,還描述了在中是如何和以及進(jìn)行交互的。關(guān)于這一點(diǎn)我們將在后續(xù)反應(yīng)系統(tǒng)中討論。父組件通過(guò)向下傳遞數(shù)據(jù)給子組件,子組件通過(guò)給父組件發(fā)送消息。這個(gè)對(duì)象必須是普通對(duì)象原生對(duì)象,及原型屬性會(huì)被忽略。 Vue.js 是用于構(gòu)建交互式的 Web 界面的庫(kù)。Vue.js 提供了 MVVM 數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng),具有簡(jiǎn)單、靈活的 API。 其實(shí)和Jquery一樣...
閱讀 2606·2021-10-14 09:43
閱讀 3565·2021-10-13 09:39
閱讀 3298·2019-08-30 15:44
閱讀 3147·2019-08-29 16:37
閱讀 3713·2019-08-29 13:17
閱讀 2739·2019-08-26 13:57
閱讀 1831·2019-08-26 11:59
閱讀 1252·2019-08-26 11:46
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要