12.03vuex总结/quasar学习

一. vuex的总结

1. 手动配置

1）目录结构如下

目录结构

2）store/index.js的设置

引入vue和vuex，Vue.use(Vuex)；创建Vuex实例，const store = new Vuex.Store({})

store实例化的基本格式

3）在main.js中挂载store

2. store实例中的方法

1）state：用于存放公共数据。在其他.vue文件中调用使用this.$store.state.属性/方法名。

2）mutations：用于提交state中的数据，它是唯一能改变state中数据的途径，但只能是同步操作。通过在mutations中写方法，在.vue文件中的methods中调用this.$store.commit('方法名')提交数据，或者在actions中直接commit('数据')，actions的方法中必须要有{commit}形参。

3）actions：类似于vue里的methods，其函数用于处理异步操作以及一些业务逻辑。通过在actions中写方法，在.vue文件中的methods中调用this.$store.dispatch('方法名',要传入的数据)提交数据。

4）getters：类似于vue中的computed，同时也是监听属性的变化，当state中的属性发生改变的时候就会触发getters里面的方法，用于获取state中的数据，getters也可以操作数据进行改变。在.vue文件中调用this.$store.getters.方法名。

3. vuex中的辅助函数

1）mapState：将state属性映射到computed上。

2）mapGetters：将getters属性映射到computed上。

3）mapMutations：将mutations属性映射到methods上。

4）mapActions：将actions属性映射到actions上。

所有辅助函数的接收方式都有两种，数组和对象（推荐对象）。

computed中的两个辅助函数

methods中的两个辅助函数

注意：使用mapActions时，要事先在methods中写好触发的函数

数组的接收方式

数组的接收方式

4. 模块modules

按照模块划分

      1）每个模块相当于一个小型的vuex

      2）每个模块中都会有state，mutations, actions, getters, modules

      3）!切记再到处模块的时候，加上namespaced: true 主要作用时将每个模块都有独立命名空间。

示例

二. Quasar的学习

1. Quasar的简单安装

在已vue create 文件名 的文件中，导航到新创建的项目文件夹并添加cli插件

cd my-app         vue add quasar

回车之后会询问你是否希望插件替换某些现有文件，若是第一次安装，则可以进行替换，明了quasar的结构，一边快速开发应用程序；若是多次开发，则可以不进行替换。

成功安装之后，会出现src/quasar.js文件，具体如下：

相关自有配置

然后就可以根据quasar提供的组件一一引进到quasar.js文件后再进行使用。

例如QBtn的使用，先在quasar中import，再在components注册QBtn。