vue2 服务端获取的数据绑定到date后,html能使用数据,js使用不了数据
时间: 2024-03-07 08:50:26 浏览: 52
在 Vue2 中,服务端渲染的数据是通过 `context.state` 传递到客户端的,客户端需要通过 `Vue.mixin` 将服务端传递过来的数据混合到客户端的 Vue 实例中。这样客户端才能正确地获取到服务端渲染的数据。
具体的步骤如下:
1. 在服务端渲染时,将数据绑定到 `context.state` 上:
```javascript
// 在服务端渲染时,将数据绑定到 context.state 上
context.state = {
data: 'hello world'
}
```
2. 在客户端入口文件中,通过 `Vue.mixin` 将 `context.state` 中的数据混合到客户端的 Vue 实例中:
```javascript
// 在客户端入口文件中,通过 Vue.mixin 将 context.state 中的数据混合到客户端的 Vue 实例中
Vue.mixin({
beforeCreate() {
// 判断是否是客户端渲染,并且 context.state 中有数据
if (typeof window !== 'undefined' && window.__INITIAL_STATE__) {
this.$data = Object.assign(this.$data, window.__INITIAL_STATE__)
}
}
})
```
3. 在客户端代码中,可以通过 `this.$data` 访问服务端渲染的数据:
```javascript
// 在客户端代码中,可以通过 this.$data 访问服务端渲染的数据
console.log(this.$data.data) // 输出 'hello world'
```
这样,就可以在客户端中正确地访问服务端渲染的数据了。
阅读全文