# 在 laravel中使用 vue

面試趣 AB TEST GA
比薪水

## 安裝 vue

npm install --save vue@next

npm install vue-loader@next

npm install @vue/compiler-sfc

## 新增相關設定
**webpack.mix.js**

mix
	.js('resources/js/example.js', 'public/js').vue()

## 新增基本的檔案
**resources/js/example.js**

import { createApp } from 'vue'
import ExampleTest from './vue-components/pages/ExampleTest.vue'

require('./bootstrap')
createApp(ExampleTest).mount('#app')

**resources/js/vue-components/Example.vue**

<template>
  <h1>Vue 3 App!zzz!</h1>
</template>

{{-- 代表這份文件繼承 layout.blade.php --}}
@extends('foreground/layout.layout-v2')

{{-- 填入預留的title內容 --}}
{{-- Meta 資訊 --}}
@push('meta')
@endpush


@push('styles')
  <link rel="stylesheet" href="{{ mix('css/bind-account.css') }}">
@endpush

@push('scripts')
  <script src="{{ mix('/js/example.js') }}"></script>
@endpush


{{-- 填入預留的content --}}
@section('content')
  <div id="app"></div>
@endsection

---
# 安裝 vuex

npm install vuex@next --save

## 在 vue 中使用 vuex
**resources/js/example.js**

import { createApp } from 'vue'
+ import Store from './vue-components/store/store'
import ExampleTest from './vue-components/pages/ExampleTest.vue'

require('./bootstrap')
createApp(ExampleTest)
+  .use(Store)
  .mount('#app')

### 新增 store 的 store.js
**resources/js/vue-components/store/store.js**

import { createStore } from 'vuex'
// createPersistedState 這個好像停止更新不維護了？？
// import createPersistedState from 'vuex-persistedstate'
import example from './modules/example'

export default createStore({
  // plugins: [createPersistedState()],
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {},
  modules: {
    example,
  },
})

### 新增 store 的 module: example.js
**resources/js/vue-components/store/modules/example.js**

export const state = {
  exampleText: 'Example-Default!!!',
}

export const actions = {
  exampleAction({ commit, state }, payload) {
    commit('setExample', payload)
  },
}

export const mutations = {
  setExample(state, payload) {
    state.example = payload
  },
}

export const getters = {
  exampleStr(state) {
    return '123' // `${state.example} Str`
  },
  exampleCustomStr: (state) => (customStr = 'customStr') => {
    return `${state.example} ${customStr}`
  },
}

export default {
  state,
  actions,
  mutations,
  getters,
  namespaced: true, // 預設會被註冊在 Global, true 給予其 namespaced (example/)
}

## 在 vue 中取得 vuex 的值
**resources/js/vue-components/pages/Example.vue**

<template>
  <h1>Vue 3 App!！!</h1>
  <p>文字來自於 vuex 的 state: {{ getExampleStr }}</p>
</template>

<script>
import { computed } from '@vue/runtime-core'
+ import { useStore } from 'vuex'
export default {
  setup() {
+    const store = useStore()

    // 取得 modules example store 的 state exampleText 的值
+    const getExampleStr = computed(() => {
+      return store.state.example.exampleText
+    })
    return {
      getExampleStr,
    }
  }
}
</script>