vuex

1桩蓉,vuex的概述

vex,是一個專門為vue設(shè)計的集中式狀態(tài)管理架構(gòu)劳闹,你可以把他理解為在data中的屬性可以共享給其他vue組件使用院究,也可以理解為vuex是包含全局?jǐn)?shù)據(jù)和變量的插件。

2玷或,vuex的使用

1,在使用之前儡首,我們需要安裝vuex
npm install vuex --save
2,新建store文件夾,在其下建立store.js偏友,在其中引用vue和vuex

   import Vue from 'vue';
   import Vuex from 'vuex';

3,使用vuex蔬胯, 引用vue.use 進行引用
Vue.use(Vuex);

state

state:可以說是vuex中的全局訪問狀態(tài)對象,也可以理解為全局變量位他,常用的三種訪問方式:
1氛濒,通過store來直接賦值
this.$store.state.count
2,通過mapState的對象來賦值
import {mapState} from 'vuex';

  computed:mapState({
            count:state=>state.count  //理解為傳入state對象鹅髓,修改state.count屬性
     })

3舞竿,通過mapState的數(shù)組來賦值
computed:mapState(["count"])

Mutations

Mutations是唯一能夠更改state狀態(tài)的方式,通過commit一個Mutations來更改窿冯,而在Mutations中可以傳入state的參數(shù)骗奖,并且還有接收叫做payload(載荷)的東東作為第二個參數(shù),這個東東是用來記錄開發(fā)者使用該函數(shù)的一些信息醒串。
1执桌,提交Mutations

 <button @click="$store.commit('add',10)">+</button>
 <button @click="$store.commit('reduce')">-</button>
 
const mutations={
        add(state,n){
            state.count+=n;
        },
        reduce(state){
            state.count-=1;
        }
    }

2,獲取Mutations的方法
import { mapState,mapMutations } from 'vuex';

  methods:mapMutations([
            'add','reduce'
    ]),
<button @click="reduce">-</button>

3,getters
getters從表面是獲得的意思,可以把他看作在獲取數(shù)據(jù)之前進行的一種再編輯,相當(dāng)于對數(shù)據(jù)的一個過濾和加工芜赌。你可以把它看作store.js的計算屬性仰挣。

    const getters = {
        count:function(state){
            return state.count +=100;
        }
    }

然后可以在vue組件中可以使用getters

   computed:{
        ...mapState(["count"]),
        count(){
            return this.$store.getters.count;
        }
    },

actions

actions和之前講的Mutations功能基本一樣,不同點是缠沈,actions是異步的改變state狀態(tài)膘壶,而Mutations是同步改變狀態(tài)错蝴。至于什么是異步什么是同步這里我就不做太多解釋了,如果你不懂自己去百度查一下吧颓芭。
actions的使用

    const actions ={
        addAction(context){
            context.commit('add',10)
        },
        reduceAction({commit}){
            commit('reduce')
        }
    }

在vue的組件中使用

    methods:{
        ...mapMutations([  
            'add','reduce'
        ]),
        ...mapActions(['addAction','reduceAction'])
    },

傳參的actions:需要手動傳參
this.$store.dispatch('fun',this.checkedNames);

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末顷锰,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子畜伐,更是在濱河造成了極大的恐慌馍惹,老刑警劉巖躺率,帶你破解...
    沈念sama閱讀 217,084評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件玛界,死亡現(xiàn)場離奇詭異,居然都是意外死亡悼吱,警方通過查閱死者的電腦和手機慎框,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來后添,“玉大人笨枯,你說我怎么就攤上這事∮鑫鳎” “怎么了馅精?”我有些...
    開封第一講書人閱讀 163,450評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長粱檀。 經(jīng)常有香客問我洲敢,道長,這世上最難降的妖魔是什么茄蚯? 我笑而不...
    開封第一講書人閱讀 58,322評論 1 293
  • 正文 為了忘掉前任压彭,我火速辦了婚禮,結(jié)果婚禮上渗常,老公的妹妹穿的比我還像新娘壮不。我一直安慰自己,他們只是感情好皱碘,可當(dāng)我...
    茶點故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布询一。 她就那樣靜靜地躺著,像睡著了一般癌椿。 火紅的嫁衣襯著肌膚如雪健蕊。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天如失,我揣著相機與錄音绊诲,去河邊找鬼。 笑死褪贵,一個胖子當(dāng)著我的面吹牛掂之,可吹牛的內(nèi)容都是我干的抗俄。 我是一名探鬼主播,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼世舰,長吁一口氣:“原來是場噩夢啊……” “哼动雹!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起跟压,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤胰蝠,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后震蒋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體茸塞,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年查剖,在試婚紗的時候發(fā)現(xiàn)自己被綠了钾虐。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,773評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡笋庄,死狀恐怖效扫,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情直砂,我是刑警寧澤菌仁,帶...
    沈念sama閱讀 35,470評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站静暂,受9級特大地震影響济丘,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜籍嘹,卻給世界環(huán)境...
    茶點故事閱讀 41,080評論 3 327
  • 文/蒙蒙 一闪盔、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧辱士,春花似錦泪掀、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至头岔,卻和暖如春塔拳,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背峡竣。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1 269
  • 我被黑心中介騙來泰國打工靠抑, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人适掰。 一個月前我還...
    沈念sama閱讀 47,865評論 2 370
  • 正文 我出身青樓颂碧,卻偏偏與公主長得像荠列,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子载城,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,689評論 2 354

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

  • 安裝 npm npm install vuex --save 在一個模塊化的打包系統(tǒng)中肌似,您必須顯式地通過Vue.u...
    蕭玄辭閱讀 2,934評論 0 7
  • vuex 場景重現(xiàn):一個用戶在注冊頁面注冊了手機號碼,跳轉(zhuǎn)到登錄頁面也想拿到這個手機號碼诉瓦,你可以通過vue的組件化...
    sunny519111閱讀 8,015評論 4 111
  • Vuex是什么川队? Vuex 是一個專為 Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件...
    蕭玄辭閱讀 3,114評論 0 6
  • 系列文章:Vue 2.0 升(cai)級(keng)之旅Vuex — The core of Vue applic...
    6ed7563919d4閱讀 4,549評論 2 58
  • 姓名:岳沁 學(xué)號:17101223458 轉(zhuǎn)載自:http://blog.csdn.net/h5_queensty...
    丘之心閱讀 2,141評論 0 1