// store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { msg: '' }, actions: { setMsg ({ commit }, val) { commit('setMsg', val) } }, mutations: { setMsg (state, val) { Vue.set(state, 'msg', val)//关键 } } })
很基础的逻辑，关键在Vue.set这个方法，重新增加了响应式；
修改下app.js
//app.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store'//加个store就行了 export function createApp(){ const app = new Vue({ router, store, render:h => h(App) }) return {app,router} }
store.vue改成这样
<template> <div @click='run'>{{msg}}</div> </template> <script> export default { data(){}, created(){ this.$store.dispatch('setMsg','this is created') }, computed:{ msg(){ return this.$store.state.msg; } }, mounted(){ this.$store.dispatch('setMsg','this is mounted') }, methods: { run(){ alert('this is methods') } } } </script>
重新打个包，想一下，修改页面的话只需要重新打包client,如果修改了app.js两个就要都重新打包了；
node server 一下
这回总算完成了；
>总结
服务端渲染东西还是挺多的，涉及领域也非常广，比如vue，webpack,node，它们的生态圈都大的可怕，需要学习东西非常多，
坑又多，又大，又深，后面还有很多问题要解决：
异步数据加载；//html返回前先渲染一部分接口拿到的数据 怎么做seo优化；//做服务端渲染的重要原因，处理异步数据加载问题也是为了这个 缓存怎么加； 开发环境搭建；//你并不希望每改一行代码就重新手动打个包，重启下服务吧0.0 还有怎么实现部分页面ssr；//一个项目不可能所有页面都服务端渲染，太耗性能，服务器压力大呀；
还有很多疑惑：
比如为什么会失去响应式，webpack到底该怎么配置。。