# Pinia

## 與Vuex差異性

移除 Mutations(個人覺得寫起來比較方便)

## store ts

import { defineStore } from 'pinia'
export const userStep = defineStore('steps', {
  state: () => {
    return { 
      step: 1,
      chSteps: ["一","二","三","四"]
    }
  },
  getters: { 
    // 取得state內特定結果
    chineseTranslate(state):string {
      return state.chSteps[state.step - 1]
    },
  },
  actions: {
    // 更改state內值
    nextStep() {
      if(this.step > this.chSteps.length - 1) return;
      this.step += 1
    },
    backStep() {
      if(this.step < 2) return;
      this.step -= 1
    },
    addNewStep(stepName: string) {
      this.chSteps.push(stepName);
    },
    removeStep(index: number) {
      this.chSteps.splice(index ,1);
      const stepsLength = this.chSteps.length;
      if(this.step > stepsLength) {
        this.step = stepsLength
      }
    }
  },

})

### call action(composition Api)

  import { userStep } from '../store/step'
  const actionStep = userStep();
  
  function addPiniaClick() {
    actionStep.nextStep()
  }

### 直接修改Store

  import { userStep } from '../store/step'

  const { step, chSteps } = storeToRefs(userStep())
  // const b = chSteps
  const maxStep = computed(() => {
    return step.value >= chSteps.value.length
  })
  const minStep = computed(() => {
    return step.value < 2 && step.value <= chSteps.value.length
  })