如何快速應(yīng)用vue中的vuex-創(chuàng)新互聯(lián)

如何快速應(yīng)用vue中的vuex，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司主營(yíng)紅山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開(kāi)發(fā),紅山h5微信小程序開(kāi)發(fā)搭建,紅山網(wǎng)站營(yíng)銷(xiāo)推廣歡迎紅山等地區(qū)企業(yè)咨詢

vuex.js

狀態(tài)（數(shù)據(jù)）管理

在vue中當(dāng)我們管理數(shù)據(jù)的時(shí)候比較亂，我們要用到下面的這個(gè)庫(kù)，vuex.js

Vuex介紹

每一個(gè)Vuex應(yīng)用的核心就是store（倉(cāng)庫(kù)），他是用來(lái)存儲(chǔ)數(shù)據(jù)的

"store" 基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài)(state)。Vuex 和單純的全局對(duì)象有以下兩點(diǎn)不同

1.Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的

2.你不能直接改變 store 中的狀態(tài)

vuex有6個(gè)概念

• Store(最基本的概念)（創(chuàng)庫(kù)）

• State (數(shù)據(jù))

• Getters(可以說(shuō)是計(jì)算屬性)

• Mutations

• Actions

• Modules

讓我們看看怎么來(lái)創(chuàng)建一個(gè)創(chuàng)庫(kù)

store 用來(lái)儲(chǔ)存數(shù)據(jù)（狀態(tài)）

new Vuex.Store({})

數(shù)據(jù)我們放到state里面

state：{}

讓我們看看怎么來(lái)讀取里面的數(shù)據(jù)

store.state.數(shù)據(jù)

接下來(lái)讓我們看看怎么去修改數(shù)據(jù)

mutations: {}

我們?cè)趺凑{(diào)mutations的數(shù)據(jù)

用commit()方法來(lái)調(diào)用

接下來(lái)讓我們做一個(gè)小效果來(lái)看一下vuex在vue中怎么應(yīng)用

我們做一個(gè)購(gòu)物車(chē)加減按鈕的效果

運(yùn)行效果

<div id="app"></div>

<template id="tpl">
  <div>
    <tip></tip>
    <but></but>
  </div>
</template>

<script>

  var store = new Vuex.Store({
    state:{
      count:0
    },
    mutations:{
      jia (state) {
        state.count++
      },
      jian (state) {
        state.count--
      }
    }
  });

  var vm = new Vue({
    el:"#app",
    template:"#tpl",
    components:{
      tip:{
        template:"<div>{{$store.state.count}}</div>"
      },
      but:{
        template:`
          <div>
            <input type="button" value="+" @click="$store.commit('jia')"/>
            <input type="button" value="-" @click="$store.commit('jian')"/>  
          </div>
        `
      }
    },
    store
  });
</script>

我們從store里面獲取的數(shù)據(jù)最好放到計(jì)算屬性中

當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。為了解決這個(gè)問(wèn)題，我們可以使用mapState輔助函數(shù)幫助我們生成計(jì)算屬性

下面我們做一個(gè)小的效果（注意：注釋的計(jì)算屬性和下面使用mapState輔助函數(shù)2個(gè)結(jié)果是相同的）

當(dāng)映射的計(jì)算屬性的名稱(chēng)與 state 的子節(jié)點(diǎn)名稱(chēng)相同時(shí)，我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組。

運(yùn)行效果

<script>
  //我們從store里面獲取的數(shù)據(jù)最好放到計(jì)算屬性中
  var store = new Vuex.Store({
    state:{
      count:0,
      num1:1,
      num2:2
    },
    mutations:{
      jia (state) {
        state.count++
      },
      jian (state) {
        state.count--
      }
    }
  });
  var vm = new Vue({
    el:"#app",
    template:"#tpl",
    components:{
      tip:{
      //創(chuàng)建計(jì)算屬性
      
        // computed:{
        //   count(){
        //     return this.$store.state.count;
        //   },
        //   num1(){
        //     return this.$store.state.num1;
        //   },
        //   num2(){
        //     return this.$store.state.num2;
        //   }
        // },
        //使用mapState輔助函數(shù)
        //computed:Vuex.mapState({
          // count:state=>state.count,
          //num1:state=>state.num1,
          //num2:state=>state.num2
        //}),
        //mapState 傳一個(gè)字符串?dāng)?shù)組
        computed:Vuex.mapState(['count' , 'num1' , 'num2']),
        template:"<div>{{count}}{{num1}}{{num2}}</div>"
      },
      but:{
        template:`
          <div>
            <input type="button" value="+" @click="$store.commit('jia')"/>
            <input type="button" value="-" @click="$store.commit('jian')"/>  
          </div>
        `
      }
    },
    store
  });
</script>

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章標(biāo)題：如何快速應(yīng)用vue中的vuex-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://bm7419.com/article30/hohso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、用戶體驗(yàn)、關(guān)鍵詞優(yōu)化、網(wǎng)站收錄、手機(jī)網(wǎng)站建設(shè)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)