Vue组件间通信-Vuex

　　上回说到Vue组件间通讯，最后留了一个彩蛋~~~Vuex。Vuex是另一种组件通讯的方法，这节来说说Vuex(store仓库)。

　　首先Vuex需要安装，安装的方式有很多，在这里就不一一细说了。我是通过npm方式安装的：

npm install vuex --save

安装好之后需要再main.js里全局引入：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)
new Vue({
el:'#app',
store,
components: { App },
template: '<App/>'
})

　　这样就完成了Vuex的安装。接下来就是Vuex的用法了：

　　Vuex有五个属性：State、Getter、Mutation、Action、Module。

　　1. State里放入的是仓库的数据，类似于js里的data：

import Vue from 'vue'

const modules = {

    state:{

        name: '小白'

    }

    namespaced: true

}

export default modules

　　把Vuex放入src下的store文件里，建一个新的组件modules，然后把他抛出来，被引入所需数据的组件：

<script>

import { mapState }from 'vuex'

export default {

    computed:{

        // name(){

        //     return this.$store.state.name

        // }

        ...mapState(['name'])

    },

    mounted(){

        console.log(this.name)

    }

}

</script>

　　Vuex里的数据需要从计算属性(computed)里获取，我写了两种我常用的方法，都可以接收到数据，在mounted钩子里打印出的数据：

　　2. Getters里放入State里数据的扩展数据，可以把它当作计算属性。比如State里有一个数组，就可以从Getters里获取到数组的长度，或是取到对象里面的属性，用法和计算属性类似：

import Vue from ‘vue’

const modules = {

    state:{

        list:[

            {id :1,content: '第一条'},

            {id :2,content: '第二条'}

        ]

    }，

    getter:{

        listLength: (state)=>{return state.list.length}

    },
　　 namespaced: true
}

export default modules;

　　我在state里存了一个数组，然后getters计算出state里数组的长度，接下来就是在组件里接收了：

<script>

import { mapGetters } from 'Vuex'

export default {

    compoted:{

        ...mapGetters(['listLength'])

    },

    mounted(){

        console.log(this.listLegth)

    }

}

</script>

　　打开控制台打印出2，就是list数组的长度。

　　除此之外，getters里可以转化数据类型，如果接口里数据的数据类型不是我们想要的类型，那就把它放进getters里进行一下转换，然后再拿到组件里用，例如：

import Vue from 'vue'

const modules = {

    state:{

        name: '小黑'

    }，

    getters:{

        showName(state) =>{

            return name==='小白'?true:false

        }

    },

    namespaced: true

}

export default modules;

　　此时name里存放的是一组字符串，在getters里把字符串转换为布尔类型，这个类型转换有什么用呢？往下看：

<html>

<div v-if="showName">

    {{ name }}

</div>

</html>

<script>

import { mapState, mapGetters } from 'vuex'

export default{

    computed:{

        ...mapState(['name']),

        ...mapGetters(['showName'])

    }

}

</script>

　　可以通过这个布尔型的数据判断name是否显示，向上面这种就不会显示，手动将name的值改为'小白'，name才会显示出来。

　　3. Mutations里是保存在仓库的方法，这里面的方法只能用来改变state里面的数据，而且想要改变state里的数据只能用mutations里的方法，并且它里面的方法只能是同步的：

import Vue from 'vue'

const modules = {

    state:{

        name: '小黑'

    },

    mutations:{

        changeName(state){

            state.name = '小白'

        }

    },

    namespaced: true

}

export default modules;

　　还是那个例子，下面是组件调用方法：

<html>

<div>

    {{ name }}

    <el-button @click="changeName">改变名字</el-button>

</div>

</html>

<script>

import { mapState,mapMutations } from 'vuex'

export default {

    compoted:{

        ...mapState(['name'])

    },

    methods:{

        ...mapMutations(['changeName'])

    }

}

</script>

　　页面渲染后为：

　　点击按钮之后为：

　　组件里的按钮通过调用Vuex里的mutation方法将Vuex里的state数据改变，只不过mutations方法只能同步的，涉及到接口的就不能在它里面写，怎么办的？往下看：

　　4. Actions和mutations一样都是存放Vuex里的方法，只不过他们有两个最大的不同：

　　　　(1) Actions里可以存放异步方法，而Mutations只能放同步的；

　　　　(2) Actions里的方法不可以更改state里的数据，state里的数据只能在Mutations里更改。

　　Actions存放的是什么方法？简单的说，它可以存放Promise方法，也可以存放async方法，也可以在里面加定时器，通过不同的状态执行不同的方法，执行方法可以是Actions里的方法，也可以是Mutations里的方法。

　　Actions我就不举例子了，因为大部分都用于axios请求接口，简单跟大家说说这个东西怎么使用：

import Vue from 'vue'

import request from '@/api/axios'

const modules = {

    state:{

        list:[]

    },

    actions:{

        getList({ commit }){

            // 调用接口方法

            request.getList()

            .then((response)=>{

                // commit用来分配mutations方法

                commit('getList',response)

            })

        }

    }，

    mutations：{

        getList(state,response){

            state.list = response.data

        }

    }

}

　　简单利用actions异步方法分配给mutations方法，然后在mutations方法里给state里的数据赋值，取到接口数据。

　　commit用于分配mutations方法，dispatch用于分配actions方法，都需要传参进去。

　　组件调用其实和调用mutations方法类似：

<script>

import { mapState,mapActions } from 'vuex'

export default {

    computed:{

        ...mapState(['list'])

    },

    mounted(){

        this.getList()

    },

    methods:{

        ...mapActions(['getList'])

    }

}

</script>

　　这样就基本完成了vuex传值。

　　5. module可以把vuex分为不同的模块，使业务逻辑变得更清晰，更准确。在上面的代码里，有const modules，给它不同的名字就是分为不同的模块。不同的module可以存入不同的数据和方法，使用起来非常方便。

巴特西

Vue组件间通信-Vuex

最新文章

热门文章