v-kansai Vue.js/Nuxt Meetup #13【v-Shinnenkai】
chan_kaku
FURYU Corp. @Kyoto
ServerSide Engineer
Spring/Vue.js/Architecture/Test
<template>
<button @click="increment">
Count is: {{ state.count }}, double is: {{ state.double }}
</button>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
setup() {
const state = reactive({
count: 0,
double: computed(() => state.count * 2)
})
function increment() {
state.count++
}
return {
state,
increment
}
}
}
</script>
よりviewとロジックを
分離させやすくなった
function useCreateFolder (openFolder) {
// originally data properties
const showNewFolder = ref(false)
const newFolderName = ref('')
// originally computed property
const newFolderValid = computed(() => isValidMultiName(newFolderName.value))
// originally a method
async function createFolder () {
if (!newFolderValid.value) return
const result = await mutate({
mutation: FOLDER_CREATE,
variables: {
name: newFolderName.value
}
})
openFolder(result.data.folderCreate.path)
newFolderName.value = ''
showNewFolder.value = false
}
return {
showNewFolder,
newFolderName,
newFolderValid,
createFolder
}
}
微妙なところ
export function createApp() {
// Here there could also be a router
const store = useStore(true)
// we can change the state now!
store.state.counter++
// create the app instance
const app = new Vue({
render: h => h(App),
})
// expose the app and the store.
return { app, store }
}
import { createStore } from 'pinia'
export const useMainStore = createStore(
// name of the store
// it is used in devtools and allows restoring state
'main',
// a function that returns a fresh state
() => ({
counter: 0,
name: 'Eduardo',
}),
// optional getters
{
doubleCount: state => state.counter * 2,
}
)
import { useMainStore } from '@/stores/main'
export default createComponent({
setup() {
const main = useMainStore()
return {
// gives access to the whole store
main,
// gives access to the state
state: main.state,
// gives access to specific getter,
}
},
})
//単純に
main.state.counter++
//もしくは複数を一気に変更したい場合
main.patch({
counter: 3,
name:'hoge'
})
export async function login(user, password) {
const store = useUserStore()
const userData = await apiLogin(user, password)
store.patch({
name: user,
...userData,
})
}
import { computed } from '@vue/composition-api'
import { useUserStore } from './user'
import { useCartStore } from './cart'
export const summary = computed(() => {
const user = useUserStore()
const cart = useCartStore()
return `Hi ${user.state.name}, you have ${cart.state.list.length} items in your cart. It costs ${cart.price}.`
})
import { useUserStore } from './user'
import { useCartStore, emptyCart } from './cart'
export async function orderCart() {
const user = useUserStore()
const cart = useCartStore()
try {
await apiOrderCart(user.state.token, cart.state.items)
emptyCart()
} catch (err) {
displayError(err)
}
}
import { pinia } from 'pinia'
import { useUserStore } from './user'
import { useCartStore, emptyCart } from './cart'
export const useCartUserStore = pinia(
{
user: useUserStore,
cart: useCartStore,
},
{
combinedGetter: state =>
`Hi ${user.state.name}, you have ${cart.state.list.length} items in your cart. It costs ${cart.price}.`,
}
)
export async function orderCart() {
const store = useCartUserStore()
try {
await apiOrderCart(store.state.user.token, store.state.cart.items)
emptyCart()
} catch (err) {
displayError(err)
}
}