nuxt开发手记(2)-nuxt中store数据重置

0703
M站第一个模块开发结束,使用的nuxt框架SSR方式,因为对后端知识了解甚少,写的相当吃力,第一个模块开发结束后发布到测试服,发现列表中的数据永远是服务器启动时间之前的数据,即使刷新也不能获得最新数据。�

fetch ({store, params}) {
             if (store.state.article.items.length) {
                 return false;
             } else {
                let options = {
                    params: {
                        limit: store.state.article.step,
                        sinceId: 0
                    }
                };
                return axios('get', $url.getArticlesNewsURL, options)
                    .then((res) => {
                        store.commit('article/addArticleHomeItems', {items: res.data.items, type: 'init'})
                    }, error => {
                        console.log(`服务端请求情报首页数据error`, error)
                    })
             }
        },

组件获取数据时,会在fetch周期内请求数据,并更新到store中,上测试服后发现无论如何获取不到最新数据,除非整个nuxt服务重启,反复测试后发现,store在请求一次后会常驻,即使刷新window也没用,store仿佛在服务端保存了。反复查阅文档,和帖子后发现了nuxtServerInit ,然后在store的index文件中加入如下代码:

const actions = {
    nuxtServerInit({commit}, {params, route, isServer, req}){
        /**
         * 重置所有数据为空 本周期只在刷新window时触发
         *
         * 7月3日 发现了一个很奇怪的现象,store的数据在服务端会永存,
         * 每次本地的store依托于服务端的store建立,依据这个理论我尝试在此周期 初始化所有本地的store
         * 首先我在每个模块中加入了__init方法,然后再此周期调用所有模块的初始化方法,来达到每次刷新window重置store的目的
         * */
        const __initData = [
            commit('article/__init'),
            commit('special/__init'),
            commit('forumsList/__init'),
            commit('forumsDetail/__init'),
        ]
        return Promise.all(__initData)
    },
}

const createStore = () => {
    return new Vuex.Store({
        modules: {
            article: article, //组件中使用 this.$store.state.article.??? 获取此模块的内容
            special: special, //情报页面 进入推荐的专题页面
            forumsList: forumsList, //G圈首页数据
            forumsDetail:forumsDetail, //G圈详情页中列表缓存
        },
        actions: actions
    })
}

export default createStore

nuxt是我新研究的一个框架,正在尝试用于公司新项目M站中,这些写法并不知道是否最优,欢迎交流!

  • 项目相关
    地址:m.gulugulu.cn
    框架:nuxt
    类型:SSR + SPA (服务端渲染的单页面应用)

你可能感兴趣的:(nuxt开发手记(2)-nuxt中store数据重置)