分分鐘學會vue中vuex的應用

vuex.js

狀態（數據）管理

在vue中當咱們管理數據的時候比較亂，咱們要用到下面的這個庫，vuex.js

Vuex介紹

每個Vuex應用的核心就是store（倉庫），他是用來存儲數據的

"store" 基本上就是一個容器，它包含着你的應用中大部分的狀態(state)。Vuex 和單純的全局對象有如下兩點不一樣

1.Vuex 的狀態存儲是響應式的

2.你不能直接改變 store 中的狀態

vuex有6個概念

Store(最基本的概念)（創庫）

State (數據)

Getters(能夠說是計算屬性)

Mutations

Actions

Modules

讓咱們看看怎麼來建立一個創庫

store 用來儲存數據（狀態）

new Vuex.Store({})

數據咱們放到state裏面

state：{}

讓咱們看看怎麼來讀取裏面的數據

store.state.數據

接下來讓咱們看看怎麼去修改數據

mutations: {}

咱們怎麼調mutations的數據

用commit()方法來調用

接下來讓咱們作一個小效果來看一下vuex在vue中怎麼應用

咱們作一個購物車加減按鈕的效果

運行效果

<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裏面獲取的數據最好放到計算屬性中

當一個組件須要獲取多個狀態時候，將這些狀態都聲明爲計算屬性會有些重複和冗餘。爲了解決這個問題，咱們能夠使用mapState輔助函數幫助咱們生成計算屬性

下面咱們作一個小的效果（注意：註釋的計算屬性和下面使用mapState輔助函數2個結果是相同的）

當映射的計算屬性的名稱與 state 的子節點名稱相同時，咱們也能夠給 mapState 傳一個字符串數組。

運行效果

<script>
    //咱們從store裏面獲取的數據最好放到計算屬性中
    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:{
            //建立計算屬性
            
                // computed:{
                //     count(){
                //         return this.$store.state.count;
                //     },
                //     num1(){
                //         return this.$store.state.num1;
                //     },
                //     num2(){
                //         return this.$store.state.num2;
                //     }
                // },
                //使用mapState輔助函數
                //computed:Vuex.mapState({
                   // count:state=>state.count,
                    //num1:state=>state.num1,
                    //num2:state=>state.num2
                //}),
                //mapState 傳一個字符串數組
                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>