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

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']) }