Vue-vuex仓库的使用

vuex可以使同级的组件实现共享数据共享，是一个数据管理仓库 具体可以参考vuex文档
使用vuex首先需要引入：

 //安装包
cnpm i vuex 
   //引入vuex
import  Vuex from "vuex"
  //使用
Vue.use(Vuex)
  //创建实例
const store = new Vuex.Store({
  state: {     //数据 类似于data 
    age: 10,
    firstName: 'zhang',
    lastName: 'san'
  },
  getters: {   //和vue中的计算属性差不多 
    fullname({ firstName, lastName }) {
      return firstName + lastName
    }
  },
  mutations: {   //这里是方法
    addA(state) {  state是默认的 直接写即可 
      state.age++
    }
  },
    anctions: {   //用来解决异步请求的问题
    addA(state) {  //state是默认的 直接写即可 
setTimeout(()=>{
      state.age++
    },1000)
  }
})
   //注册到vue实例中
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

vuex创建好了之后 就可以直接使用了。
如果是state和getters的话 就可以直接使用

<template>
    <div>
{{$store.state.age}}
{{$store.getters.fullname}}
    </div>
</template>

如果是方法的话 需要用commit接收一下

<button @click ='add'> add</button

<button @click ='add1'> add</button
add(){
    this.$store.commit('addA')
}, 
add1(){
    this.$store.dispatch('addA')
}

但是如果遇到如

{{$store.getters.fullname}}
{{$store.state.firstName+$store.state.lastName}}

这样的代码 就比较长 代码不简洁 对此 vuex也提供了相对应的辅助函数
针对state和getters 可以写成一下代码

<script>
//先引入 就可以直接在组件中使用
import {mapState} from 'vuex'
import {mapGetters} from 'vuex'
export default {
    computed: {
        ...mapState(['age','firstName']),
        ...mapGetters(['fullname'])
    },
};
</script>

针对mutatios 可以写成一下代码

<script>
import {mapMutations} from 'vuex'
export default {
ods: {
          ...mapMutations(['addA'])
    }
};
</script>