vue-loader/vue-cli/vuex

vue-loader:

webpack 提供的支持vue的一个预编译器，经过它能够编译 sfc格式专业的VUE组件。

一、安装vue-loader

npm install -D vue-loader vue-template-compiler

二、配置webpack（注意的是除了配置规则外还须要引入loader插件）

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

 

 

vue-cli：vue项目搭建命令行工具，包括cli 、cli service 、cli 插件，关于具体的说明我的也没有看完，只是单纯作个了解，须要使用vue-cli 构建项目的小伙伴请看官网文档https://cli.vuejs.org/zh/guide/browser-compatibility.html#usebuiltins-usage。

一、安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

 二、建立项目

vue create hello-world

图形化建立

 

 

 vuex：学习vuex 目前主要是由于uni-app 中提到了它，而且在某些情境性下用来管理状态很是实用。

注册状态

 

Vuex 选项：

一、state ：单一状态树

响应式状态，使用vue的计算属性获取状态

根注入：

 

 

 辅助函数：获取多个状态，mapState，绑定data，名称相同的状况下使用字符串数组。

其返回的是一个对象，在与计算属性合并的时候，直接经过扩展运算符展开便可。

 

 二、Getter

至关于对states的计算。

经过getters 访问：

 

 mapGetters：辅助函数

相似states，一次性获取多个getter（它只是映射给局部属性）

 

 三、Mutation：提交mutation 更改状态

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变动状态
      state.count++
    }
  }
})

 

 事件调用：

store.commit('increment')

传参：

store.commit('increment', 10)

mutations: {
  increment (state, n) {
    state.count += n
  }
}

第二种调用范式：对象参数，必须包涵type 属性（我的以为用第一种就能够了）

 

 添加新属性：（最好不要添加，在初始化的时候就定义好全部属性）

Vue.set(obj, 'newProp', 123)

 

 另外官网说明mutaion 必须是同步函数，由于不可追踪，由于每一条 mutation 被记录，devtools 都须要捕捉到前一状态和后一状态的快照。

 

mapMutations：辅助函数，能够定义在methods中进行使用。

 

 

 四、Action ： 这个就有意思了，官方说明。

区别时它能够提交mutaion，并且能够包涵异步操做，它接收与store实例相同方法和属性的上下文对象，也就是说能够随意访问store中的东西~

actions: {
    increment (context) {
      context.commit('increment')
    }
  }

官方举例：购物车

 

 组件中调用：dispatch、或者使用赋值函数 mapActions

 

 

 Action 返回一个promise ，因此咱们能够监听到事件的处理步骤，或者说何时结束。（关于promise ，能够参考《你不知道的JavaScript（中）》或者看阮一峰的es6 promise章节）

 

 

这里仍是说起一下，上面的实例中action 方法第一个参数如｛commit，state｝是es6提供的对象解构赋值功能，若是你还没了解的话，去看一下教程，阮一峰大神那也有。

 

5.module：模块

因为使用单一状态树，应用的全部状态会集中到一个比较大的对象。当应用变得很是复杂时，store 对象就有可能变得至关臃肿。

为了解决以上问题，Vuex 容许咱们将 store 分割成模块（module）。每一个模块拥有本身的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行一样方式的分割

使用module后，在action 和 getters 的方法中获取根节点状态 rootState

 

访问全局内容：使用Action调用dispatch的时候使用root action须要添加一个参数对象｛root:true｝

在module中定义全局Action，除了添加参数而且把实际函数内容丢到handler 中。

 

关于访问module中的属性和方法，除了经过命名空间外还能够经过传参的方式绑定某个module

 

 

 模块动态注册：这个不看了，实际用的状况很少或者基本为不用，感兴趣的本身去看看吧。

 

 

模块重用，使用函数式声明：

const MyReusableModule = {
  state () {
    return {
      foo: 'bar'
    }
  },
  // mutation, action 和 getter 等等...
}

 

对于store 的项目结构，官方推荐若是有多个store ，创建store目录集中管理。

 

 扩展：插件

能够自定义插件，对store进行扩展，它接受store做为惟一的参数，每次mutation调用时都用进行调用，这是一个钩子~

 

 关键函数（订阅）：

store.subscribe(mutation => {
      if (mutation.type === 'UPDATE_DATA') {
        socket.emit('update', mutation.payload)
      }
    })

 

state快照（关于比对先后状态的用处，在react 官网的入门教程中的例子很是形象，若是感兴趣能够去看看，看完以后对状态先后对比会有必定的认知），此处使用lodash库，关于它的用法能够官网查看，很是实用(_.cloneDeep)；

 

 关于严格模式，官网中说起，故不用呗，而且在表单处理中对v-model 指令也会有必定的影响。

 

 

关于测试，有不少第三方测试模块可使用，另外关于热重载，使用webpack 提供的dev-server 便可且方便又实用。

 

 

这篇文章主要是由于在学习uni-app 中遇到了vuex的知识点，故学习vuex的知识更深度的api等信息，此处不表（我也没看）