【Vuex】Store的寫法：mutation、action、payload

▌Store寫法

• state：資料的狀態
• mutations：改變state的值，

  increment(state){
  this.state.count++ 
  }
  

• actions：去commit mutation

  increment:({commit})=>commit("increment")
  

▌vue寫法

• this.$store.dispatch(“action的名稱”)

  increment(){
  this.$store.dispatch("increment")
  }
  

• this.$store.commit(“mutation的名稱”)

  increment(){
  this.$store.commit("increment")
  }
  

▌範例

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state={
  num:0
}

const mutations={
  increment(state){
    state.num ++
  },
  descrement(state){
    state.num --
  }
}

const actions ={
  increment:({commit})=> commit("increment"),
  descrement:({commit})=> commit("descrement")
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

載荷寫法 Payload

▌vue

-vue：descrement ( ){ this.$store.dispatch(“descrement”,this.pay) }

  descrement(){
    this.$store.dispatch("descrement",this.pay)
  }
  increment(){
    this.$store.dispatch("increment",this.pay)
  }

▌store

• action： increment:({commit},payload)=> commit(“increment”,payload),
• mutation：increment(state,payload){ state.num +=payload}

const state={
  num:0
}

const mutations={
  increment(state,payload){
    state.num +=payload
  },
  descrement(state,payload){
    state.num -=payload
  }
}

const actions ={
  increment:({commit},payload)=> commit("increment",payload),
  descrement:({commit},payload)=> commit("descrement",payload)
}

​

【專案建構】用Vue Cli快速建立專案：包括Typescript、SCSS、Router....

最近一直在研究如何在vue專案中使用Typescript，結果設定的好累，都不知道自己在幹嘛。後來發現其實只要用最新版本的@vue/cli 3.x ，一下就可以解決了…..

https://cli.vuejs.org/zh/guide/

▌@vue/cli 是什麼

跟2.0不一樣，它可以事前就選擇套件Typescript、SCSS、Router，可以不用在事後安裝

▌安裝

啟用

yarn global add vue-cli //先安裝vue cli
vue create 專案名稱
vue ui //可以用ui 選擇各種要用的內容

常見套件

axios
bootstrap
jquery
vue-loading-overlay

​