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等信息，此處不表（我也沒看）