- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
在我从组件的脚本中获取电影细节之前。该函数首先检查商店的电影 ID 是否与路由的参数电影 ID 相同。如果相同则不要从服务器 API 获取电影,否则从服务器 API 获取电影。
它运行良好。但现在我正试图从商店的突变中获取电影细节。但是我收到错误
Uncaught TypeError: Cannot read property '$route' of undefined
如何使用 vue-router ($route)
访问参数和 vue-resource ($http)
从 vuex store 的服务器 API 获取?
store.js:
export default new Vuex.Store({
state: {
movieDetail: {},
},
mutations: {
checkMovieStore(state) {
const routerMovieId = this.$route.params.movieId;
const storeMovieId = state.movieDetail.movie_id;
if (routerMovieId != storeMovieId) {
let url = "http://dev.site.com/api/movies/movie-list/" + routerMovieId + "/";
this.$http.get(url)
.then((response) => {
state.movieDetail = response.data;
})
.catch((response) => {
console.log(response)
});
}
},
},
});
组件脚本:
export default {
computed: {
movie() {
return this.$store.state.movieDetail;
}
},
created: function () {
this.$store.commit('checkMovieStore');
},
}
最佳答案
要在您的 vuex 存储中使用 $http
或 $router
,您需要使用主 vue 实例。虽然我不推荐使用它,但我会在回答实际问题后添加我推荐的内容。
在您的 main.js
或您创建 vue 实例的任何地方,例如:
new Vue({
el: '#app',
router,
store,
template: '<App><App/>',
components: {
App
}
})
或类似的东西,您可能还添加了 vue-router
和 vue-resource
插件。
稍微修改一下:
export default new Vue({
el: '#app',
router,
store,
template: '<App><App/>',
components: {
App
}
})
我现在可以像这样在 vuex 商店中导入它:
//vuex store:
import YourVueInstance from 'path/to/main'
checkMovieStore(state) {
const routerMovieId = YourVueInstance.$route.params.movieId;
const storeMovieId = state.movieDetail.movie_id;
if (routerMovieId != storeMovieId) {
let url = "http://dev.site.com/api/movies/movie-list/" + routerMovieId + "/";
YourVueInstance.$http.get(url)
.then((response) => {
state.movieDetail = response.data;
})
.catch((response) => {
console.log(response)
});
}
}
作为Austio的回答去,这个方法应该是一个 action
因为 mutations
不是为处理异步而设计的。
现在介绍推荐的方法。
您的组件
可以访问路由参数
并将其提供给action
。
methods: {
...mapActions({
doSomethingPls: ACTION_NAME
}),
getMyData () {
this.doSomethingPls({id: this.$route.params})
}
}
action
然后通过抽象的 API 服务文件 (read plugins
) 进行调用
[ACTION_NAME]: ({commit}, payload) {
serviceWhichMakesApiCalls.someMethod(method='GET', payload)
.then(data => {
// Do something with data
})
.catch(err => {
// handle the errors
})
}
您的 actions
执行一些异步工作并将结果提供给 mutation
。
serviceWhichMakesApiCalls.someMethod(method='GET', payload)
.then(data => {
// Do something with data
commit(SOME_MUTATION, data)
})
.catch(err => {
// handle the errors
})
Mutations
应该是唯一修改您的state
的。
[SOME_MUTATION]: (state, payload) {
state[yourProperty] = payload
}
例子一个包含端点列表的文件,如果您有不同的部署阶段具有不同的 api 端点,例如:测试、暂存、生产等,您可能需要它。
export const ENDPOINTS = {
TEST: {
URL: 'https://jsonplaceholder.typicode.com/posts/1',
METHOD: 'get'
}
}
以及将 Vue.http
作为服务实现的主文件:
import Vue from 'vue'
import { ENDPOINTS } from './endpoints/'
import { queryAdder } from './endpoints/helper'
/**
* - ENDPOINTS is an object containing api endpoints for different stages.
* - Use the ENDPOINTS.<NAME>.URL : to get the url for making the requests.
* - Use the ENDPOINTS.<NAME>.METHOD : to get the method for making the requests.
* - A promise is returned BUT all the required processing must happen here,
* the calling component must directly be able to use the 'error' or 'response'.
*/
function transformRequest (ENDPOINT, query, data) {
return (ENDPOINT.METHOD === 'get')
? Vue.http[ENDPOINT.METHOD](queryAdder(ENDPOINT.URL, query))
: Vue.http[ENDPOINT.METHOD](queryAdder(ENDPOINT.URL, query), data)
}
function callEndpoint (ENDPOINT, data = null, query = null) {
return new Promise((resolve, reject) => {
transformRequest(ENDPOINT, query, data)
.then(response => { return response.json() })
.then(data => { resolve(data) })
.catch(error => { reject(error) })
})
}
export const APIService = {
test () { return callEndpoint(ENDPOINTS.TEST) },
login (data) { return callEndpoint(ENDPOINTS.LOGIN, data) }
}
queryAdder 以防它很重要,我用它来向 url 添加参数。
export function queryAdder (url, params) {
if (params && typeof params === 'object' && !Array.isArray(params)) {
let keys = Object.keys(params)
if (keys.length > 0) {
url += `${url}?`
for (let [key, i] in keys) {
if (keys.length - 1 !== i) {
url += `${url}${key}=${params[key]}&`
} else {
url += `${url}${key}=${params[key]}`
}
}
}
}
return url
}
关于javascript - 如何在 vuex 商店中使用 vue-resource ($http) 和 vue-router ($route)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42560318/
我正在寻找外行人对计算机硬件和组织的介绍。以下是我想讨论的一些主题。 Brief intro to electronics. Gates and state machines, intro to re
有没有人在 Visual Basic 2010 中看到过这个错误,如果有的话......关于如何解决它的任何想法? 错误是 module 'Resources' and module 'Resourc
这个问题在这里已经有了答案: Why ?attr/colorAccent dose not work below lollipop version? (2 个答案) 关闭 5 年前。 我收到以下错误
我正在尝试通过 ring 学习 clojure 网络开发和 compojure我有点不清楚 compojure.route/resources 和 ring.middleware.resource/w
是否必须放置内部 try-with-resources 或其中一个 try-with-resources 中的所有内容都会自动关闭? try (BasicDataSource ds = Bas
我有一本包含多个食谱的 Chef 食谱,用于安装服务。 Chef-client 的工作方式是每 15 分钟(或其他固定时间间隔)重新收敛一次。现在我的食谱的第一步是停止服务,所以服务将每 15 分钟停
我有资源组“MyResources”,其中包含 4 个资源: AppService - 我的服务器, AppServicePlan - MyServerWestEuFarm, ApplicationI
我有资源组“MyResources”,其中包含 4 个资源: AppService - 我的服务器, AppServicePlan - MyServerWestEuFarm, ApplicationI
我有一个返回 ResponseEntity 的休息终点. 需要检查如何在 Swagger 规范中创建这种类型的响应。这里包中的资源是 org.springframework.core.io.Resou
In my azure portal I have 6 separate applications, I have to list all of the employed resources u
In my azure portal I have 6 separate applications, I have to list all of the employed resources u
我有一个问题,设计师不会显示表单。它失败,错误 Designer 给出警告,如下所示: 我该如何解决这个问题? 最佳答案 您似乎缺少在应用程序中加载此表单所需的项目 资源 . 您可以访问 资源右键单击
我是 angularJS 世界的新手,我可能误解了一些东西。 我的应用程序使用 Controller 、指令和服务,所有这些都运行完美,直到我使用带有 $resource 的服务,然后出现“冲突”或其
我在 Unity3D 工作。 我使用 Resources.LoadAll(path);加载文件夹和子文件夹中的所有项目。执行此操作后,我想获取对象的子文件夹名称或完整路径。这可能吗? 并且不建议使用
我需要监控每个客户端环境(一个订阅、多个资源组)的 Azure 支出。在我的研究中,我发现了 2 个可以使用的 API: 资源费率卡( https://msdn.microsoft.com/fr-fr
在 RDF 1.1 XML 语法文档中 rdf:resource 在定义 Empty Property Elements 时用作缩写形式: When a predicate arc in an RDF
这是一种常见的情况,我们需要在用户更新/创建一些数据后向用户显示错误/成功消息,我们如何在 AngularJS 中实现它? 我想添加回调但找不到解决方案。使用 $http.post().success
我正在使用 android studio 作为 IDE 开发一个 android 应用程序。 我的问题是: 如何在构建APK过程中排除某个目录下的某些文件? 在我的例子中,我想从构建中排除一些图像,因
在编译我的 Visual Studio C# 项目时,出现以下错误: 在“Resources”参数中多次指定项目“obj\Debug\SampleProject.Forms.MDIMain.resou
使用 CoffeeScript、Angular 和 $resource,我创建了以下工厂: angular.module('myapp', ['ngResource']).factory 'MyObj
我是一名优秀的程序员,十分优秀!