vuex总结

什么是父子组件

---

使用components，引入的组件为子组件，子组件所在的当前组件为父组件。

<template id="info">
    <div>
        <p>我是组件</p>
    </div>
</template>
<div id="app">
    <info></info>
</div>

new Vue({
    el: '#app',
    components:{
        "info":{
            template:"#info",
        },
    },
    data() {
        return {
            
        }    
    }
});
// info组件就是当前app组件的子组件

vue中数据共享方式

---

父组件向子组件传值：v-bind属性绑定

<template id="info">
    <div>
        <p>{{val}}</p>
    </div>
</template>
<div id="app">
    <info v-bind:val="nameData"></info>
</div>

new Vue({
    el: '#app',
    components:{
        "info":{
            template:"#info",
        },
    },
    data() {
        return {
            nameData:"张三"        
        }    
    }
});
// info组件就是当前app组件的子组件

子组件向父组件传值：v-on事件
兄弟之间共享数据：EventBus
emit：发送数据的组件

vuex介绍

vuex：实现组件之间数据共享
vuex官网：https://vuex.vuejs.org/zh/
配置：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

store数据共享

---

store练习：加减器

<template>
    <div>
        <p>当前值为{{this.count}}</p>
        <p>-----------------------------</p>
        <p>当前值为{{this.$store.state.count}}</p>
    </div>
</template>
import { mapState } from 'vuex';
<script>
export default {
    name: "Mall",
    data() {
        return {

        }
    },
    computed: {
       ...mapState(['count'])
    }
}
</script>

vuex中store获取共享数据，便于操作：

this.$store.state.xxxxx

vuex通过mapState映射 this.count 为 store.state.count

computed: {
    ...mapState(['count'])
}

Mutation实现数据操作

---

mutations: {
    add(state) {
      state.count++;
    },
    substract(state) {
      state.count--;
    }
}

调用方式：his.$store.commit("方法名")

export default {
    name: "Subtract",
    data() {
        return {

        }
    },
    methods: {
        substractNum() {
            this.$store.commit("substract");
        }
    }
}

Mutation传递参数：

mutations: {
    add(state, payload) {
      state.count += payload.amount
    },
    substract(state, payload) { // payload为一个对象，里面传入多个参数。
      state.count -= payload.amount
    }
}

调用方式：this.$store.commit("方法名", 参数名);

<template>
    <div>
        <el-button @click="substractNum()">减{{amount}}</el-button>
    </div>
</template>

<script>

export default {
    name: "Subtract",
    data() {
        return {
            amount:3
        }
    },
    methods: {
        substractNum() {
            let payload = {};
            payload.amount = this.amount;
            this.$store.commit("substract", payload);
        }
    }
}
</script>

第二种写法：使用mapMutations，将本地方法映射为$store.commit("方法名")

<script>
import { mapMutations } from 'vuex'

export default {
    name: "Add",
    data() {
        return {
            amount: 5
        }
    },
    methods: {
        ...mapMutations(['add']),
        addNum() {
            let payload = {};
            payload.amount = this.amount;
            this.add(payload);
        }
    }
}
</script>

注意:mutation 必须是同步函数

action：实现异步操作

---

配置：

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {
  },
  mutations: {
    add(state, payload) {
      state.count += payload.amount
    },
    substract(state, payload) {
      state.count -= payload.amount
    }
  },
  actions: {
    substractAsync(context, step) {
      setTimeout(() => {
        // 调用mutations中的同步方法add
        context.commit('substract', step);
      }, 1000)
    }
  },
  modules: {
  }
})

使用dispatch调用：

methods: {
    substractNum() {
        let payload = {};
        payload.amount = this.amount;
        // this.$store.commit("substract", payload);
        this.$store.dispatch("substractAsync", payload);
    }
}

第二种调用写法：

import { mapActions } from 'vuex';

methods: {
    ...mapActions(['substractAsync']),
    substractNum() {
        let payload = {};
        payload.amount = this.amount;
        // this.$store.dispatch("substractAsync", payload);
        this.substractAsync(payload);
    }
}

Getter：对store中的数据加工处理形成新的数据（包装器）

---

不会修改store中的数据
store数据发生变化，Getter中的数据也会发生变化

getters: {
    getCount: state => {
      return state.count;
    },
    getCount1(state) {
      return state.count;
    }
}

调用方式：

<template>
    <div>
        <p>当前值为{{this.$store.getters.getCount}}</p>
        <p>当前值为{{this.$store.getters.getCount1}}</p>
    </div>
</template>

第二种调用方式：

import { mapActions } from 'vuex';

computed: {
   ...mapGetters(['getCount'])
}