应用程序Vuex存储(Vuex Store)

在大型应用程序中，状态管理经常变得复杂，因为多个组件之间分散的多个状态以及它们之间的交互。 人们常常忽视Vue实例中的真实来源是原始数据对象–Vue实例只是代理对其的访问。 因此，如果您有一段应该由多个实例共享的状态，则应避免将其复制并通过identity进行共享。

如果您想要组件共享状态，推荐使用的方法是Vuex。 在深入研究之前查看它的文档。搭配使用Vue dev-tools的浏览器扩展(如Time Travel调试)时它有很好的特性。

我们不会详细介绍如何配置或使用Vuex，因为它有很棒的文档。 相反，我们只是告诉你在Quasar项目中使用它时文件夹结构的样子。

.
└── src/
    └── store/               # Vuex Store
        ├── index.js         # Vuex Store 定义
        ├── <folder>         # Vuex Store 模块...
        └── <folder>         # Vuex Store 模块...

默认情况下，如果您在使用Quasar CLI创建项目文件夹时选择使用Vuex，它将设置使用Vuex模块。 /src/store的每个子文件夹代表一个Vuex模块。

如果在您的网站应用程序中Vuex模块太多，您可以更改/src/store/index.js并避免导入任何模块。

添加一个Vuex模块

Quasar CLI通过$ quasar new命令轻松添加Vuex模块。

$ quasar new store <store_name>

它会在上面的命令中创建一个名为“store_name”的/src/store文件夹。 它将包含您需要的所有样板。

假设您要创建一个“showcase”Vuex模块。 你运行$ quasar new store showcase。 然后您会注意到新创建的/src/store/showcase文件夹，其中包含以下文件：

.
└── src/
    └── store/
        ├── index.js         # Vuex Store定义
        └── showcase         # "showcase"模块
            ├── index.js     # 将模块粘合在一起
            ├── actions.js   # actions模块
            ├── getters.js   # getters模块
            ├── mutations.js # mutations模块
            └── state.js     # state模块

我们已经创建了新的Vuex模块，但我们还没有通知Vuex使用它。 所以我们编辑/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

现在我们可以在我们的Vue文件中使用这个Vuex模块。 假设我们配置了state的“drawerState”属性并增加了updateDrawerState方法。

快速示例:

// src/store/showcase/mutations.js
export const updateDrawerState = (state, opened) => {
  state.drawerState = opened
}

// src/store/showcase/state.js
export default {
  drawerState: true
}

在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>

预处理器和Webpack 主题