vuex中从接口获取数据，并渲染到页面
在vue中，有时候要使用vuex来处理项目中的一些接口问题，于是简单测试了一下，以下是我的方法，如有错误，请指出。
1.首先，新建一个文件夹，如图，在新建一个index.js文件，内容填写在里面，因为我的项目并不完整，所以使用的vuex属性并不多。
2.在vue官网中引入vuex，这里我使用的是npm安装，npm安装需要在index.js写入以下的代码。
3.导入封装好的api接口函数，这里的接口封装我就不详细讲解，因为我需要引入三个接口，所以就在index.js引入了三个，需要注意的是，接口名一定要和你封装调用的接口名一致。
这是getapi.js文件
4.实例化vuex配置对象，并导出
export default new Vuex.Store({
})5.state封装状态，在store文件夹下新建一个state.js,初始化数据
6.vuex中为了代码看起来简洁清晰，常常使用常量替代Mutation事件类型。新建mutation-type.js，自定义常量名。
7.mutations更改状态的逻辑，同步操作。在store文件夹下新建一个mutations.js
8.actions – 提交mutation，异步操作，因为我接口中需要经纬度数据，所以我在这里直接将经纬度写死，测试一下。
9.在index.js导入state，mutations，mutation-type文件
10.在index.js配置对象里引入state，mutations
11.在App.vue里调用
12.在需要渲染的页面导入辅助函数
13.测试有没有拿到数据
如果拿到数据，可以通过v-for循环遍历数组，精确拿到你想要的数据。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
