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

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

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

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

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

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

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

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

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

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

2、Vuex核心概念

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

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

console.log(store.state.count)

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

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

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

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

store.commit('increment')

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

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

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

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

3、使用vuex

1、引入vuex文件或在項(xiàng)目的mian.js中引入并使用

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

2、實(shí)例化Vuex

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

3、在app中注冊(cè)store

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

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

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

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

<div id="app">
  <counter></counter>
  <button @click="add">點(diǎn)擊加一</button>
</div>

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

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

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

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

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

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

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

最新評(píng)論