vueSSR: 从0到1构建vueSSR项目 --- vuex的配置（数据预取）

vuex的相关配置

上一章做了node以及vue-cli3的配置,今天就来做vuex的部分。
先打开官方文档-数据预取和状态

看完之后，发现大致的逻辑就是
利用mixin，拦截页面渲染完成之前，查看当前实例是否含有'asyncData'函数(由你创建以及任意名称)，
如果含有就进行调用，并且传入你需要的对象比如(store,route)

例子

// pages/vuex/index.js
export default {
    name: "vuex",
    asyncData({
        store,
        route
    }) {
        // 触发 action 后，会返回 Promise
        return store.dispatch('fetchItem', route.path)
    },
    computed: {
        // 从 store 的 state 对象中的获取 item。
        item() {
            return this.$store.state.items[this.$route.path]
        }
    }
}


//mixin

import Vue from 'vue';
Vue.mixin({
    beforeMount() {
        const {
            asyncData
        } = this.$options
        if (asyncData) {
            this.dataPromise = asyncData({
                store: this.$store,
                route: this.$route
            })
        }
    }
})

上面只是个大概的示例，下面开始正式来做吧。

先创建一些文件
    src/store.config.js  跟router.config.js 一样，在服务端运行避免状态单例
    src/pages/store/all.js 全局公共模块

//  src/pages/store/all.js
    const all = {
        //开启命名空间
        namespaced: true,
        //ssr注意事项 state 必须为函数
        state: () => ({
            count:0
        }),
        mutations: {
            inc: state => state.count++
        },
        actions: {
            inc: ({ commit }) => commit('inc')
        }
    }
    export default all;

vuex 模块

all 单独一个全局模块
如果home有自己的数据，那么就在home下 惰性注册模块
但是记得页面销毁时，也一定要销毁模块！！！
因为当多次访问路由时，可以避免在客户端重复注册模块。
如果想只有个别几个路由共用一个模块，
可以在all里面进行模块嵌套，或者将这个几个页面归纳到一个父级路由下 ，在父级实例进行模块惰性注册。

// home/index.js
import all from '../store/all.js';
export default {
    name: 'home',
    computed:{
        count(){
            return this.$store.state.all.count
        }
    },
    asyncData({ store}){
        store.registerModule('all',all);
        return store.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:'vue ssr'
                }
            ]
        };
    },
    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')
    }
}

数据预取

// store.config.js

    //store总配置
    import Vue from 'vue';
    import Vuex from 'vuex';

    Vue.use(Vuex);


    //预请求数据
    function fetchApi(id){
        //该函数是运行在node环境 所以需要加上域名
        return axios.post('http://localhost:8080/cms/i1/user_info');
    }
    //返回 Vuex实例 避免在服务端运行时的单利状态
    export function createStore() {
        return new Vuex.Store({
            state:{
                items:{}
            },
            actions: {
                fetchItem ({commit}, id) {
                    return fetchApi(id).then(item => {
                        commit('setItem',{id, item})
                    })
                }
            },
            mutations: {
                setItem(state, {id, item}){
                    Vue.set(state.items, id, item.data)
                }
            }
        })
    }

mixin相关

在src下新建个methods 文件夹，这里存放写vue的全局代码以及配置
获取当前实例

// src/methods/index.js

import './mixin';
import Vue from 'vue';
import axios from 'axios';
Vue.prototype.http = axios;

// src/methods/mixin/index.js
    import Vue from 'vue';
    Vue.mixin({
        beforeMount() {
            const {
                asyncData
            } = this.$options;//这里 自己打印下就知道了。就不过多解释了
            //当前实例是否有该函数
            if (asyncData) {
               // 有就执行，并传入相应的参数。
                asyncData({
                    store: this.$store,
                    route: this.$route
                })
            }
        }
    })

main.js 新增代码

    import Vue from 'vue';
    Vue.config.productionTip = false;
    import VueRouter from 'vue-router';

    import App from './App.vue';
+   import './methods';
    //同步路由状态
+   import { sync } from 'vuex-router-sync';


    import {
        createRouter
    } from './router.config.js';

+   import {
        createStore
    } from './store.config.js';

    export function createApp() {

        const router = createRouter()
        const store = createStore()
        //同步路由状态(route state)到 store
        sync(store, router)
        const app = new Vue({
            router,
+           store,
            render: h => h(App)
        })
        return { 
            app,
            router,
+           store
        };
    }

下面更新，开发环境部署相关

项目github地址
项目公网地址

1) vueSSR: 从0到1构建vueSSR项目 --- 初始化
2) vueSSR: 从0到1构建vueSSR项目 --- 路由的构建
3) vueSSR: 从0到1构建vueSSR项目 --- node以及vue-cli3的配置
4) vueSSR: 从0到1构建vueSSR项目 --- vuex的配置（数据预取）
5) vueSSR: 从0到1构建vueSSR项目 --- 开发环境的部署
6) vueSSR: 从0到1构建vueSSR项目 --- 伪热更新