Nuxt.js中使用Vuex

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

以app、culture、interact三个模块为例

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.js、culture.js、interact.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.js、interact.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() ]