Nuxt.js中使用Vuex

Nuxt已经内置了vuex,不需要再次安装。
使用方法跟在vue-cli项目中基本一样

appcultureinteract三个模块为例

Classic(不建议使用)

  • store/目录下新建index.js文件
import Vue from 'vue' import Vuex from 'vuex' import getters from './getters' import app from './modules/app' import culture from './modules/culture' import interact from './modules/interact' import createLogger from 'vuex/dist/logger' Vue.use(Vuex) const debug = process.env.NODE_ENV !== 'production' const store = () => { // 唯一区别:这里返回一个方法 return new Vuex.Store({ getters, modules: { app, culture, interact }, strict: debug, plugins: debug ? [createLogger()] : [] }) } export default store
  • store/目录下新建modules/目录
  • store/modules目录下新建模块文件app.jsculture.jsinteract.js
  • store/目录下新建getters.js文件

具体不在累述,可参考 Vue常用插件:vuex

模块方式(推荐)

  • store/目录下新建app.js文件
export const state = () => ({ // 用方法的形式返回 loadingFlag: true, openTime: (new Date()).getTime(), curVideo: null }) export const mutations = { setLoadingFlag(state, flag) { state.loadingFlag = flag }, setOpenTime(state, time) { state.openTime = time }, setCurVideo(state, video) { state.curVideo = video } }
  • store/目录下新建culture.jsinteract.js文件,类似app.js
  • store/目录下新建getters.js
const getters = { // app loadingFlag: state => state.app.loadingFlag, openTime: state => state.app.openTime, curVideo: state => state.app.curVideo, // ... } export default getters

页面中使用的时候也是分模块使用的

import { mapGetters, mapMutations } from 'vuex' export default { computed: { ...mapGetters(['cartoon', 'chapters']) }, methods: { ...mapMutations({ setChapter: 'culture/setChapter' }), // ... } }

添加Vuex模块,比如vuex-persistedstate

  • store/目录下新建index.js
import createPersistedState from 'vuex-persistedstate' export const plugins = [ createPersistedState() ]

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: