vue+vuex實現 counter計數器

框架搭建好過後輸入npm run dev的時候不會直接打開瀏覽器，在config文件夾找到index.js文件夾 把autoOpenBrowser: false改為autoOpenBrowser: true，從新在命令行輸入npm run dev，這是就會自動打開瀏覽器。 如圖修改

現在做個簡單的demo示例：counter(計數器)

一、文件夾與文件的創建

• 1、首先要在components文件夾下面創建counter的一個文件夾
• 2、然後在counter文件夾裏創建文件app.vue，然後就可以開始寫代碼了

代碼如圖：

上面代碼就是這個簡單的vue應用，左邊是main.js裏面註冊組件的代碼，右邊是我們寫的計數器的代碼，點擊加（“+”）或者減（“-”）的時候瀏覽器上面的點擊次數會變化，就是代碼裏面data裏的count這個變量或發生變化

網頁顯示如圖：

二、狀態管理Vuex（狀態機）

我們現在在上面這個demo裏面引入vuex看看效果

• 1、在命令行使用npm下載vuex依賴,輸入下面命令

  npm install vuex --save
  如圖：

這就是成功了的，現在看package.json文件裏面就會多一段代碼："vuex": "^3.0.1"

• 2、在components文件夾創建一個store文件夾，並在store文件夾下面創建一個store.js文件，現在先不管store.js文件，先在main.js裏註冊組件（全局註冊）
  如圖：

• 3、在components/store/store.js文件裏引入Vue、Vuex和counter裏面的store.js文件
  如圖：

• 4、在counter文件夾裏面的app.vue文件裏面引入vuex的方法mapState和mapMutations輔助函數

• 5、在counter文件夾裏面創建store.js文件，然後看看加入vuex後的代碼的變化
  如圖：

現在可以對比一下加了vuex和沒有加vuex的代碼區別

源代碼：github

vue+vuex實現 counter計數器