vuex在Vue组件间通信中的使用分析

上次说到Vue组件之间的交流，终于留下了一个彩蛋~~~Vuex。Vuex是组件通信的另一种方法。在本节中，我们将讨论Vuex(商店仓库)。

首先，需要安装Vuex。安装的方法很多，这里就不赘述了。我是通过npm安装的：

安装npm install vuex - save后，需要在main.js中全局引入：

从“vue”导入vue从“vuex”导入Vuex。使用(vuex)新vue ({el:' # app '，store，components : {app}，template :' app/'})，从而完成vuex的安装。接下来是Vuex的用法：

Vuex有五个属性：状态、Getter、突变、动作和模块。

1.仓库中的数据处于状态，类似于js中的数据：

从' vue' const modules中导入={ state : { name : '小白' } namespace : true}导出默认模块将Vuex放入src下的存储文件中，创建一个新模块，然后将其抛出并导入所需的数据组件：

scriptimport { mapState }从“vuex”导出默认值{ computed : }//name(){//返回此。$ store . state . name/}.mapState(['name']) }，数据已装入(){控制台。日志(这个。name)}}/scriptvuex需要从计算属性中获取。我写了两个我常用的方法，可以在挂载的钩子中接收数据和打印数据：

这里只是一个教你如何使用它的例子。不建议你写给我。Vuex应该用于所有业务逻辑数据。如果不涉及业务逻辑，建议使用上一章的方法：Vue组件之间的通信。

2.状态中数据的扩展数据放入getters中，可视为计算属性。例如，如果State中有一个数组，可以从Getters中获取数组的长度，或者获取对象中的属性。用法类似于计算属性：

从“vue”const模块中导入vue={ state : { list :[{ id :1，content3360' article 1'}，{id33602，content:' article 2'}]，getter : { list length :(state)={ return state . list . length } }，namespaced: true }导出默认模块；我在状态中保存了一个数组，然后getters计算了状态中数组的长度，然后在组件中接收到它：

脚本从“vuex”导入{ mapgetters }导出默认值{ compoted: {.mapgetter([' list length '])}，mounted () {console.log (this。list leg)}}/script打开控制台并打印出2，这是列表数组的长度。

3.突变是储存在仓库里的一种方法。此方法只能用于更改状态中的数据。如果要更改状态中的数据，只能使用变体中的方法，并且其中的方法只能同步：

从“vue”const modules={ state : { name : '小黑' }导入vue，突变3360 {changename (state) {state。name='小白' }}，命名空间： true}导出默认模块；同样，下面是组件调用方法：

html div { { name } } El-button @ click=' change name '更改名称/el-button/div/html脚本导入{map state，Map variations}从' vuex '导出默认{ compoted: {.映射状态(['name'])}，方法：地图变体([' change name '])} }/脚本页面呈现如下：

单击按钮后：

组件中的按钮通过调用Vuex中的突变方法来改变Vuex中的状态数据，但突变方法只能同步，涉及接口的不能写入其中。我该怎么办？往下看：

4.动作和变体在Vuex中是相同的方法，但它们有两个最大的区别：

(1)异步方法可以存储在动作中，但只有同步方法可以存储在突变中；

(2)状态数据不能在动作中改变，状态数据只能在变化中改变。

行动的方法是什么？简单来说就是Promise方法，通过不同的状态执行不同的方法，执行方法可以是Actions中的方法，也可以是ventures中的方法。

我就不举Actions的例子了，因为大部分都是用于axios请求接口的。让我简单告诉你如何使用这个东西：

从“vue”导入Vue从“@/API/axios”const模块导入请求={ state:{ list:[] }，Actions : { getlist({ commit }){//调用接口方法request.getlist()。然后((response)={//commit用于分配突变方法commit('getList '，response) })}}，ventures:{ getList(state，response) {state。列表=响应。data}}通过使用actions异步方法简单地分配给突变方法，然后在突变方法中为状态中的数据分配一个值，以获得接口数据。

Commit用于分配突变方法，dispatch用于分配动作方法，所有这些都需要传入。

组件调用实际上类似于调用突变方法：

脚本从“vuex”导入{映射状态，映射操作}导出默认值{ computed : {.映射状态(['list'])}，已挂载(){this。getlist ()}，方法3360 {.映射操作(['getlist'])}}

5.module可以将vuex划分为不同的模块，使得业务逻辑更加清晰、准确。在上面的代码中，有const模块，给它不同的名字意味着把它分成不同的模块。不同的模块可以存储不同的数据和方法，使用起来非常方便。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。