القائمة
Vue 2 Options API patterns for the Landing Page editor — Vuex namespaced stores, Ant Design Vue components, mixins, computed getters/setters, and axios API calls.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Phoenix Channel patterns in landing_page_backend — real-time collaboration, WebSocket topics, broadcasting, and channel structure.
Guide to Context module patterns in landing_page_backend — Ecto queries, dynamic query building, Ecto.Multi, and Outbox messaging.
Guide to Phoenix Controller structure in landing_page_backend using FallbackController, tuple responses, and permission plugs.
Patterns for creating Oban background workers in landing_page_backend — queue configuration, job arguments, retry strategies, and dynamic query processing.
Custom Plug middleware patterns in landing_page_backend — authentication (JWT/Passport), authorization, permission checking, and rate limiting.
Guidelines for creating Ecto Schemas in landing_page_backend, including binary UUID primary keys, virtual fields, custom json/1 function, and multiple changeset patterns.
| name | landing_page-vue2-editor |
| description | Vue 2 Options API patterns for the Landing Page editor — Vuex namespaced stores, Ant Design Vue components, mixins, computed getters/setters, and axios API calls. |
| metadata | {"author":"Vũ Lưu","version":"2026.03.30","source":"Source code landing_page_backend/assets/editor"} |
Vue 2.6 + Vuex 3 + Ant Design Vue 1.6 — Page builder editor application.
| Topic | Description | Reference |
|---|---|---|
| Component Pattern | Options API, computed getters/setters, mapState/mapGetters | core-components |
| Vuex Store | Namespaced modules, mutations, actions, Vuex architecture | core-vuex |
| API & Mixins | Axios calls, mixin patterns, custom plugins | core-api-mixins |
<template>
<div class="my-trait">
<a-input
v-model="title"
:placeholder="$t('ui.placeholder.title')"
@change="onTitleChange"
/>
<a-select v-model="status" style="width: 100%">
<a-select-option :value="1">{{ $t('ui.active') }}</a-select-option>
<a-select-option :value="0">{{ $t('ui.inactive') }}</a-select-option>
</a-select>
<a-checkbox v-model="autoPlay">Auto Play</a-checkbox>
<a-button type="primary" @click="save">
{{ $t('ui.save') }}
</a-button>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import axios from 'axios'
export default {
name: 'MyTrait',
props: {
elementId: { type: String, required: true }
},
data() {
return {
loading: false,
localData: null
}
},
computed: {
...mapState('page', ['data', 'sync']),
...mapState('ui', ['selectedElements']),
...mapGetters('page', ['currentPage']),
// Two-way computed — đọc từ store, ghi lại store
title: {
get() {
return this.$store.state.page.data.name
},
set(value) {
this.$store.commit('page/set-name', value)
}
},
status: {
get() {
return this.$store.state.page.data.status
},
set(value) {
this.$store.commit('page/set-status', value)
}
}
},
methods: {
...mapActions('page', ['refresh-async-products']),
onTitleChange() {
// Debounce hoặc xử lý thêm
},
async save() {
this.loading = true
try {
const res = await axios.put(`/api/pages/${this.data.id}`, {
name: this.title,
status: this.status
}, {
headers: { 'x-org-id': this.$store.state.organization.id }
})
if (res.status === 200) {
this.$notification.success({ message: 'Saved!' })
}
} catch (e) {
this.$notification.error({ message: 'Save failed' })
} finally {
this.loading = false
}
}
},
mounted() {
this['refresh-async-products']()
}
}
</script>
<style scoped lang="sass">
.my-trait
padding: 12px
.ant-input
margin-bottom: 8px
</style>