vuex

1. 子组件

cat Profile.vue 

<template> 
   <div class="container">
        <header>
            <slot name="header"></slot>
        </header>
        <h1>{{ d }}</h1>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>
     

<script>
import { mapState, mapGetters } from 'vuex'

export default {
    name: "profile",
    
    computed: {
       
        ...mapState({
            c: state=>state.count
        }),
        ...mapGetters({
            d: "getCount",
        })
    }

}
</script>
 
 <style scoped>
    .container {
        margin-top: 100px;
    }
 </style>

　　

2. 父组件

cat Index.vue

<template> 
   <div>
       <profile>
           <template v-slot:header>
               <h1>测试</h1>
           </template>
           <template v-slot:footer>
              <h3>d</h3>
           </template>
       </profile>
       <button @click="changeVuex">+1</button>
   </div>
 </template>
     

<script>
import Profile from '../../components/profile'

export default {
    
    components: {
        Profile
    },
    data() {
        return {
            counts: 0 
        }
    },
    methods: {
        changeVuex() {
            this.$store.commit("incrsc")
        }
    }
    
}
</script>


 

　　

 

3 vuex 

 

cat store.js

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

Vue.use(Vuex)

const state = {
    count : localStorage.count || 0  
}

const getters = {
    getCount: function(state) {
        return state.count
    }
}

const mutations = {
    incrsc(state) {
        state.count++
        localStorage.count++
    }
}

const actions = {

}

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})