quasar项目中集成vuex

前言

作为一个Android开发者，最近被要求学习quasar框架开发h5项目。相信能看这个文章的童鞋们对quasar和Vuex已经有所了解。这篇文章主要帮助那些创建quasar项目时没有选择集成Vuex插件，后面又需要用到Vuex时如何顺利安装Vuex插件并能够使用。

安装Vuex插件

NPM

npm install vuex --save

Yarn

yarn add vuex

创建store文件

quasar new s <store_name>

quasar new s showcase

修改/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

// 首先导入模块
import showcase from './showcase'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    // 然后我们引用它
    showcase
  }
})

// 如果我们需要一些HMR魔术，我们会处理
// 下面的热点更新。 注意我们实现这个
// 用“process.env.DEV”代码 - 所以这不会
// 进入我们的生产版本（也不应该）。
if (process.env.DEV && module.hot) {
  module.hot.accept(['./showcase'], () => {
    const newShowcase = require('./showcase').default
    store.hotUpdate({ modules: { showcase: newShowcase } })
  })
}

export default store

src/store/showcase/mutations.js

export const updateDrawerState = (state, opened) => {
  state.drawerState = opened
}

// src/store/showcase/state.js

export default {
  drawerState: true
}

ShowCase.vue组件

<template>
  <div>
    <q-toggle v-model="drawerState" />
  </div>
</template>

<script>
export default {
  computed: {
    drawerState: {
      get () {
        return this.$store.state.showcase.drawerState
      },
      set (val) {
        this.$store.commit('showcase/updateDrawerState', val)
      }
    }
  }
}
</script>

这个时候只是完成一半，使用 quasar dev运行会报如下错误：

配置store

在主目录找到 .quasar文件夹

接下来我们要修改标红线的两个文件，只修改app.js也能运行。

app.js

红色标识为新增代码：

import createStore from 'app/src/store/index'

const store = typeof createStore === 'function'
    ? await createStore({Vue})
    : createStore

store.$router = router

const app = {
    router,
    store,
    render: h => h(App)
  }

return {
    app,
    store,
    router
  }

client-entry.js

至此大功告成。
demo地址