分分鐘學(xué)會vue中vuex的應(yīng)用（入門教程）

更新時間：2017年09月14日 11:01:31 作者：Besmall

本篇文章主要介紹了vue中vuex的應(yīng)用（入門教程），詳細(xì)的介紹了vuex.js和應(yīng)用方法，有興趣的可以了解一下

vuex.js

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

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

Vuex介紹

每一個Vuex應(yīng)用的核心就是store（倉庫），他是用來存儲數(shù)據(jù)的

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

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

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

vuex有6個概念

Store(最基本的概念)（創(chuàng)庫）
State (數(shù)據(jù))
Getters(可以說是計算屬性)
Mutations
Actions
Modules

讓我們看看怎么來創(chuàng)建一個創(chuàng)庫

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

new Vuex.Store({})

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

state：{}

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

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

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

mutations: {}

我們怎么調(diào)mutations的數(shù)據(jù)

用commit()方法來調(diào)用

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

我們做一個購物車加減按鈕的效果

運行效果

<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ù)最好放到計算屬性中

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

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

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

運行效果

<script>
  //我們從store里面獲取的數(shù)據(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)建計算屬性
      
        // 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 傳一個字符串?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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: