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>