Please enable JavaScript.

Coggle requires JavaScript to display documents.

FullStack vue 3 - Coggle Diagram

- - - - createApp(App).use(router)
      - import { createRouter, createWebHistory } from 'vue-router';
        const router = createRouter({
        history: createWebHistory(),
        routes: [{
        path: "/products",
        component: ProductList,},
        {
        path: '/products/:id',
        component: ProductItem
        },
        {
        path: "/cart",
        component: CartList,
        },
        ,
        {
        path: '/:pathMatch(.)',
        component: NotFound
        }
        ],});
  - - - const router = createRouter({
        history: createWebHistory(),
        routes: [
        ...,
        {
        path: '/login',
        component: LoginBox,
        beforeEnter: (to, from, next) => {
        const token = localStorage.getItem("token");
        if (token) next('/products');
        else next();
        }
        },
        ...
        ]
        });
- - - - a testing framework that allows us to categorize our tests in describe and it blocks
    - - Introduced Chai, an assertion library which gives us handy features like expect.
- - - - ref use to primitive variables
        reactive use to object
- - - - Breaking up state management logic into isolated, smaller, testable parts
      - components are simpler
      - mismatch between the state tree and the DOM tree
  - - - • All of our application’s data is in a single data structure called the state, which is held in the
      - store
      - • Our app reads the state from this store
      - • The state is never mutated directly outside the store
      - • The views dispatch actions that describe what happened
      - • The actions commit to mutations
      - • Mutations directly mutate/change store state
      - • When the state is mutated, relevant components/views are re-rendered
    - - const mutations = {
        ADD_NOTE (state, payload) {
        let newNote = payload;
        state.notes.push(newNote);
        },
        }
      - const actions = {
        addNote (context, payload) {
        context.commit('ADD_NOTE', payload);
        },
        }
      - const getters = {
        getNotes(state) {
        return state.notes;
        },
        }
      - const state = {
        notes: [],
        }