vue 当中组件之间共享数据的实现方式

npm install vuex --save

import Vuex from 'vuex'
Vue.use(vuex)

const store = new Vuex.Store({
    // state 中存放的就是全局共享的数据
    state: { count: 0 }
})

new Vue({
    el: '#app',
    render: h => h(app),
    router,
    // 将创建的共享数据对象，挂载到 vue 实例中
    // 所有的组件，就可以直接从 store 中获取全局的数据了
    store
})

// 创建store数据源，提供唯一的公共数据
const store = new Vuex.Store({
    state: { count:0 }
})

// 1. 从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'

// 2. 将全局数据，映射为当前组件的计算属性
computed: {
    ...mapState(['count'])
}

// 定义 Mutation
const store = new Vuex.Store({
    state:{
        count: 0
    }
}),
mutations:{
    add(state){
        //变更状态
        state.count++
    }
}
 
// 触发mutation
methods：{
    handle(){
        //触发 mutation 的第一种方式
        this.$store.commit('add')
    }
}

// 定义 Mutation
const store = new Vuex.Store({
    state:{
        count: 0
    },
    mutations:{
        addN(state,step){
            // 变更状态
            state.count += step
        }
    }
})
 
 
// 触发mutation
methods:{
    handle2(){
        // 在调用 commit 函数，触发 mutations 是携带参数
        this.$store.commit('addN',6)
    }
}

//1. 从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'

methods:{
    ...mapMutations(['add','addN']),
    // 下面是在组件中的使用方法，此时映射的 add 和 addN 函数就相当于当前组件的方法，通过this调用即可
    btnHandle1(){
        this.add()
    }
    btnHandle2(){
        this.addN()
    }
}

// 定义 Action
const store = new Vuex.Store({
    state:{
        count: 0
    },
    mutations:{
        add(state){
            state.count++
        },
        //携带参数的形式
        addN(state,step){
            state.count += step
        }
    },
    actions:{
        addAsync(context){
            setTimeout(()=>{
                context.commit('add')
            },1000) 
        },
        // actions 携带参数的形式
        addAsyncN(context,step){
            setTimeout(()=>{
                context.commit('addN',step)
            },1000)
        }
    }
})
 
 
// 触发 Action
methods：{
    handle(){
        // 触发 actions 的第一种方式
        this.$store.dispatch('addAsync')
    },
    handle2(){
        // 触发 actions 时携带参数
        this.$store.dispatch('addAsyncN',6 )
    }
}

// 定义 getter
const store = new Vuex.Store({
    state:{
        count: 0
    },
    mutations:{},
    Actions:{},
    getters:{
        showNum: state => {
            return '当前最新的数量是【'+ state.count +'】'
        }
    }
})

import { mapGetters } from 'vuex'
computed:{
    ...mapGetters(['showNum'])
}