Optimal PHP Development IDE

So, I wanted to share my php development environment.

The setup is :

Next we download Xdebug which gets attached to PHP via php.ini – download here

I’m using the PHP 7.4 VC15 TS (64 bit) (Latest at the moment) —

 

 

Vuex Basics

So Vuex is very similar to Redux as far as what they are trying to accomplish. It is about creating a data store that all components can access rather than passing the data directly from component to component.  These are my quick notes on Vuex.

Creating a Store


const store = new Vuex.Store ({
    // The data we want available to rest of application
    state: {
        message: 'Hello World',
        count: 0
    },
    // These are things that change the state // synchronous
    mutations: {
        increment(state,payload){
            state.count+=payload;
        }
    },
    // Asynchronous
    actions: {
        increment(state,payload){
            state.commit('increment',payload)
        }
    },
    // These are a central way to pull data from the state
    getters: {
        message(state){
            // Formatting it for example
            return state.message.toUpperCase();
        },
        counter(state){
            return state.count;
        }
}
});

Grabbing the data from the store (Not Recommended)

Although you can do this to grab the data directly from the store – its better to use the getter. That way if you implement formatting/validation etc it can be done in one place.

Script


<script>
new Vue ({
    el: '#app',
    data() {
        return {
            welcome: 'Hello World'
        }
    },
    computed: {
        message(){
            return store.state.message;
        }
    }
})
</script>

Output (html/razor)


 <body>
        <div id="app">
        <h1>{{welcome}}</h1>
        <h2>{{message}}</h2>
        </div>
    </body>

Grabbing the data from the store using a getter
Script


<script>
new Vue ({
    el: '#app',
    data() {
        return {
            welcome: 'Hello World'
        }
    },
    computed: {
        message(){
            return store.getters.message;
        },
        count(){
            return store.getters.counter;
        }
    },
    methods : {
        pressed(){
            // Would call the mutation (synchronously)
            //store.commit('increment',10);
            // This calls the action (Asynchronously)
            store.dispatch('increment,10);
        }
    }
})
</script>

Output (html/razor)


 <body>
        <div id="app">
        <h1>{{welcome}}</h1>
        <h2>{{message}}</h2>
        <h3>{{count}}</h3>
        <button @click="pressed">Increment Counter</button>
        </div>
    </body>


Some Final Thoughts

  • Actions are async meaning that all API requests should be done in actions. Vue Docs – Actions
  • Mutations are synchronous – so these should not require any outside resource ever. Pure state manipulation only.
  • Recommended App Structure for Vue Apps

Vue Toes in first!

So one of the upcoming projects I am working on let me know they use Vue. I decided to get a headstart on things and dip my toes into the Vue pond!

First I want to give thanks to Brad @  Traversy Media for his Vue JS Crash Course video.
These are my notes from the video as well as my first experience with Vue.

Breaking Down a Vue Component

These break out into basically three different parts.

  • (HTML) Output which is basically a blade/razor/twig template/etc page.
  • (JS) Functionality this is the data retrieve/load/manipulate/delete (CRUD) layer, animation
  • (CSS) Style which includes formatting for the component

Output

   <template>
        <div class="user">
            <h1> {{ user.name }} </h1>
        </div>
    </template>

 

Function

 <script>
        export default {
            name : 'User',
            data() {
                return {
                    user: { 
                        name: 'Brad'
                    }
                }
            }
        }
    </script>

Style

 <style scoped>
    h1 { font-size: 2rem;} 
 </style>

 

Getting Setup – Environment

You need

From Command Prompt

Install Vue CLI (Command-line interface)

npm install -g @vue/cli

 

Create your project

vue create test

*test is the project name – this can be whatever you want

 

 

Code Bits

Example functionality that has data

<script>
import Todos from './components/Todos.vue';

export default {
    name: 'app',
    components: {
        Todos
    },
    data() {
        return {
            todos: [
                {
                    id:1,
                    title:"Todo One",
                    completed: false
                },
                {
                    id:2,
                    title:"Todo Two",
                    completed: false
                }
            ]
        }
    }
}

Now to use that loaded data and pass it to the output we would use a Vue attribute v-bind
<template>
    <div id="app">
        <Todos v-bind:todos="todos" />
    </div>
</template>

Receiving data in a component

So now the Todos component when its loading we can receive the data the same was as React. This means we grab it out of the properties passed to it – stored in props.

<script>
export default {
    name: "Todos",
    props: ["todos"]
}
</script>

Output Template For Todos Component
Then to print out each of the data

<template>
    <div>
        <div v-bind:key="todo.id" v-for="todo in todos">
        <b>{{todo.title}}</b>
        </div>
    </div>
</template>

Now the two key parts to the above.

  • v-for=”todo in todos” which is what is iterating thru the data passed in from props
  • v-bind:key=”todo.id” which sets the unique key for the data – so id in this case. Vuetr (Visual Studio Code Addon) will give you a syntax error if you do not include the unique key – best practice kinda thing.

So in the video he broke the Todos (list of todo) into TodoItem component. There was a neat trick in there about binding on a conditional.

<div class="todo-item" v-bind:class="{'is-complete':todo.completed}">

So lets break that down abit.  The v-bind:class attaches the css class “is-complete” whenever the statement to the right of the colon is true.  So in the data he has a true/false in todo.completed so this already directly goes to a boolean.

 

Event Handling 

<input type="checkbox" v-on:change="markComplete">


<script>
export default {
    name: "TodoItem",
    props: ["todo"],
    methods: {
        markComplete() {
            this.todo.completed = !this.todo.completed;
            console.log("show mark completing");
        }
    }
}

So breaking this down.  the v-on:change=”markComplete” adds the js event listener for onChange  and invokes the method markComplete.

This is how to add methods to a component.

Bubbling up an event

So in TodosItem

<button v-on:click=”$emit(‘del-todo’,todo.id)”>x</button>

So this is running in the todosItem – so its really in 2 parts.

‘del-todo’ which is the name of the event, and the second todo.id is the paramaters you want to pass to it.

 

Then in Todos (the list of todos)

<TodoItem v-bind:todo=todo v-on:del-todo=$emit(del-todo, todo.id) />

This catches the event and fires the event to the parent.

In the parent we can catch that and fire a method

v-on:del-todo=”deleteTodo”

 

Brads completed source code is available at Github

Thanks again Brad! Very Helpful!

Here is Vue’s documentation Vue Docs

Next I’ll need to get exposed to Vuex which is a state manager similar to redux (used with react).