vuex的相关配置上一章我们做了node和vue-cli3的配置，今天来做部分的。先打开官方文档——看了dataprefetchingandstatus后，发现大体逻辑是使用mixin拦截页面的渲染，检查当前实例是否包含'asyncData'函数（由你和任意名字创建),如果是，则继续调用，并传入你需要的对象，例如(store,route)示例//pages/vuex/index.jsexportdefault{name:"vuex",asyncData({store,route}){//action触发后会返回Promisereturnstore.dispatch('fetchItem',route.path)},computed:{//从store的state对象中获取item。item(){returnthis.$store.state.items[this.$route.path]}}}//mixinimportVuefrom'vue';Vue.mixin({beforeMount(){const{asyncData}=this.$optionsif(asyncData){this.dataPromise=asyncData({store:this.$store,route:this.$route})}}})的上面只是一个粗略的例子，下面开始正式的做吧。先创建一些文件src/store.config.js和router.config.js一样，在服务器上运行，避免状态单例src/pages/store/all.jsglobalpublicmodule//src/pages/store/all.jsconstall={//启用命名空间namespaced:true,//ssr注意state必须是函数state:()=>({count:0}),mutations:{inc:state=>state.count++}...页面被销毁，也一定要销毁模块！！！因为当路由被多次访问时，可以避免在客户端重复注册模块。如果只希望几个路由共用一个模块，可以将所有模块嵌套，或者将这些页面分组到一个父路由中，在父实例中进行模块的惰性注册。//home/index.jsimportallfrom'../store/all.js';exportdefault{name:'home',computed:{count(){returnthis.$store.state.all.count}},asyncData({store}){store.registerModule('all',all);returnstore.dispatch('all/inc')},data(){return{activeIndex2:'1',show:false,nav:[{path:'/home/vue',name:'vue'},{path:'/home/vuex',name:'vue-vuex'},{path:'/home/vueCli3',name:'vue-cli3'},{path:'/home/vueSSR',name:'vuessr'}]};},watch:{$route:function(){if(this.show){this.show=false;}//切换路由时自增this.$store.dispatch('all/inc');}},mounted(){//追加请求时，在mounted下执行},methods:{user_info(){this.http.post('/cms/i1/user_info').then(res=>{console.log(res.data);}).catch(error=>{console.log(error)})}},destroyed(){this.$store.unregisterModule('all')}}数据预取//存储。config.js//存储总配置importVuefrom'vue';从'vuex'导入Vuex；Vue.use（Vuex）；//预请求数据函数fetchApi(id){//该函数运行在node环境，所以需要添加域名returnaxios.post('http://localhost:8080/cms/i1/user_info');}//返回Vuex实例，避免服务器上运行时的单利状态exportfunctioncreateStore(){returnnewVuex.Store({state:{items:{}},actions:{fetchItem({commit},id){返回fetchApi(id).then(item=>{commit('setItem',{id,item})})}},突变:{setItem(state,{id,item}){Vue.set(state.items,id,item.data)}}})}对于mixin，在src下新建一个methods文件夹，里面是编写vue的全局代码和获取当前实例的配置//src/methods/index.jsimport'./mixin';importVuefrom'vue';importaxiosfrom'axios';Vue.prototype.http=axios;//src/methods/mixin/index.jsimportVuefrom'vue';vue.mixin({beforeMount(){const{asyncData}=this.$options;//这里打印出来就知道了，就不多解释了//当前实例有没有这个功能if(asyncData){//有则执行，并传入相应的参数。asyncData({store:this.$store,route:this.$route})}}})main.js添加代码importVuefrom'vue';Vue.config.productionTip=false;从'vue-router'导入VueRouter；从'./App.vue'导入App;+导入'./methods';//同步路由状态+import{sync}from'vuex-router-sync';从'./router.import{createRouter}config.js';+import{createStore}from'./store.config.js';exportfunctioncreateApp(){constrouter=createRouter()conststore=createStore()//将路由状态（routestate）同步到storesync(store,router)constapp=newVue({router,+store,render:h=>h(App)})return{app,router,+store};}下面更新，开发环境部署相关项目github地址项目公网地址1）vueSSR：从0到1构建vueSSR项目---初始化2）vueSSR：从0到1构建vueSSR项目---构建路由3)vueSSR:BuildvueSSRprojectfrom0to1---node和vue-cli3的配置4)vueSSR:BuildvueSSRprojectfrom0to1---vuex的配置（数据预取）5)vueSSR:From0to1buildthevueSSRproject---部署开发环境6)vueSSR:BuildthevueSSRprojectfrom0to1---假热更新
