再看看
事件也有了，页面没变化，console一下，发现值其实已经变了，只是失去了响应式；这就是为什么要用vuex的缘故；
>加入vuex
开始想在页面中用this.$set方法，然而行不通，而且不可能给每个值都重新写一个这个方法；
加个sotre.js
// 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优化；//做服务端渲染的重要原因，处理异步数据加载问题也是为了这个
