动作与修改:获取后端应用数据

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

先要找个方法可以请求后端服务接口,获取到一些应用里的一些数据。我打算用一下 axios .. 在项目下面,先去安装一下 axios .. npm install axios --save ..

获取数据可以是个动作 .. 在 posts 在这个 store 模块的 actions.js 里面,可以去定义一个动作 .. 先在文件里面导入 axios ...

export const getInitialData .. 动作的名字叫 getInitialData .. 一个箭头函数 .. 函数有个 context 参数,在 store 上面包含的东西,在 context 里面也可以找到 ..

里面用一下 axios 的 get 方法发出一个 GET 类型的 http 请求 .. 先把请求的地址告诉这个方法 .. 地址就是网站的地址 .. 加上 wp-json .. 文章列表接口的 REST 地址是 wp/v2/posts ..

axios 的 get 会返回一个 Promise,所以我们可以接着用一个 then .. 一个函数参数 .. 得到的响应是 response ..

这个 response 里面会包含我们需要在 Vue 应用上使用的一些数据 .. 这些数据来自后端服务 ..

得到了数据以后,可以再 commit 一个修改 .. 就是 commit 一个 mutation ,这个 commit 方法在 context 里面可以找到 .. context.commit .. 先是 mutation 的类型 .. 比如我们应用上可以有一个叫 setInitialData .. 提交这个修改,再带上 response 这个数据 .. 就是用 axios 从后端服务那里请求回来的数据 ..

修改

现在我们需要再去定义一个 mutation ,在 posts 模块下面,打开 mutaitons.js ..

这里可以 export const setInitialData,定义并且导出一个 mutation .. 函数有两个参数,state 是数据,payload,是提交修改的时候带的数据 ..

在方法里面,可以让 state.entities 等于 payload 里的 data .. 这个 payload 里的 data 就是一个文章列表数据 ..

数据

打开 posts 这个模块的 state.js .. export 一个 default 对象 .. 里面添加一个 entities .. 默认让它等于一个空白的数组 ..

动作与修改:获取后端应用数据《 Vue.js 前端应用:项目结构 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点