Vue-CLI與Vuex使用方法實例分析

本文實例講述了Vue-CLI與Vuex使用方法。分享給大家供大家參考，具體如下：

1、通過Vue-CLI創(chuàng)建項目

Vue-CLI是Vue用于創(chuàng)建Vue項目的腳手架工具，它可以快速幫你創(chuàng)建一個Vue項目的文件目錄，使Vue開發(fā)更加便捷、標準化。

1、全局安裝腳手架：npm install --global vue-cli，安裝成功后可以通過vue -V查看版本號

2、初始化項目文件夾：vue init webpack 項目名，之后會出現(xiàn)命令行交互，根據(jù)提示設置項目名稱、描述以及是否安裝一些依賴包。

3、安裝依賴包：在vue項目中會用到很多第三方依賴，如果是新項目或者添加了新的依賴，運行之前就需要安裝依賴：npm install，有時在啟動項目時會報錯Error: Cannot find module 'XXX'，這就是由于項目缺少依賴導致。如果npm install后仍報錯，建議把依賴的文件夾node_modules刪除，再重新安裝依賴試一試。

4、啟動項目：npm run dev，自動會在瀏覽器8080端口彈出項目頁面。vue默認端口8080，如果需要修改，在config/index.js文件內(nèi)修改port的值

5、項目打包：npm run build，在項目開發(fā)結(jié)束后打包生產(chǎn)dist文件夾，只需要把該文件放到服務器即可

構(gòu)建項目之后生成初始文件夾：

1. build文件夾：存放構(gòu)建項目所需的文件
2. config文件夾：項目的設置文件
   1. index.js：設置路徑、跨域代理、服務器、端口號等
3. node_modules文件夾：安裝依賴的文件
4. src文件夾
   1. assets文件夾：存放頁面相關(guān)的靜態(tài)文件例如CSS
   2. components文件夾：存放頁面使用的公共組件
   3. router/index.js：設置訪問路徑所對應的頁面
   4. views文件夾：存放vue頁面文件
   5. app.vue：頁面主入口組件
   6. main.js：頁面主js入口
5. static文件夾：存放靜態(tài)資源如圖片等
6. index.html：主頁面
7. package.json：項目所使用的依賴列表

2、Vuex核心概念

Vuex是一個專門為vue.js應用開發(fā)的狀態(tài)管理模式，當我們構(gòu)建一個大中型SPA時，vuex可以幫助我們更好的再組建外部統(tǒng)一管理狀態(tài)。當多個vue組件需要同時使用一些參數(shù)時，如果通過參數(shù)傳遞會很麻煩，而且多個組件同時操縱數(shù)據(jù)會導致開發(fā)混亂，這就需要對它們進行統(tǒng)一管理。

1、state：vuex中的數(shù)據(jù)源，所有組件對數(shù)據(jù)的操作都是對它，類似于vue組件中的data，在實例化vuex后可通過state訪問其中的數(shù)據(jù)：

console.log(store.state.count)

2、getters：由stsate中派生出的數(shù)據(jù)，在state數(shù)據(jù)的基礎(chǔ)上做修改。

3、mutations：vuex中state的數(shù)據(jù)不可以直接進行修改，這樣會造成混亂。修改state的唯一方法是提交mutation函數(shù)。

const store = new Vuex.Store({
 state: {
  count: 0
 },
 mutations: {
  increment (state) {
   state.count++
  }
 }
})

通過提交increment來使state中的count++

store.commit('increment')

4、action：可以自定義對象來提交mutation，與mutation不同的是它可以異步執(zhí)行。action通過分發(fā)的方式觸發(fā)：

actions: {
  incrementAction (context) {
   context.commit('increment')
  }
 }
store.dispatch('incrementAction') //通過分發(fā)來調(diào)用action

5、module：當管理的狀態(tài)過多時，vue的store對象就會變得臃腫，這時可以將其分割為幾個module，每個module可以有自己的state、mutation等。

          綜上，vuex的數(shù)據(jù)流圖如下：當vue components觸發(fā)事件時，引起分發(fā)action，action提交到mutation，mutation改變state的值，導致重新渲染vue component組件。

3、使用vuex

1、引入vuex文件或在項目的mian.js中引入并使用

 <script src="../js/vuex.js"></script>

2、實例化Vuex

  const store=new Vuex.Store({
   state:{
    count:10
   },
   mutations:{
    increment(state){    //只有通過mutation中的方法才可修改store中的值
     state.count++;
    }
   }
  });

3、在app中注冊store

 let vue=new Vue({
   el:'#app',
   data:{
   },
   store:store
 })

4、在注冊后的vue的組件couter中可以使用store，通過computed屬性訪問$store.state中的數(shù)據(jù)：

   components:{
    counter:{
     template:`<div>計數(shù){{count}}</div>`,
     computed:{
      count(){
       return this.$store.state.count;
      }
     }
    }
   },

5、組件的add方法通過commit改變store中的值：

<div id="app">
  <counter></counter>
  <button @click="add">點擊加一</button>
</div>

   methods:{
    add(){
     this.$store.commit('increment')
    }
   }

也可以通過commit進行參數(shù)傳遞：this.$store.commit('increment',num)

6、通過getters得到處理后的數(shù)據(jù)：

  const store=new Vuex.Store({
   state:{
    count:10
   },
   getters:{     //在getters中對state中的count處理之后輸出為square，供外部調(diào)用
    square(state){
     return state.count*state.count;
    }
   },
   mutations:{
    increment(state){
     state.count++;
    }
   }
  });

        通過計算屬性square調(diào)用$store.getters.square

   computed:{
    square(){
     return this.$store.getters.square;
    }
   }

希望本文所述對大家vue.js程序設計有所幫助。