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 (服务端渲染的单页面应用)