技術 [Vue.js] Vuex 學習筆記 (19) - 實用插件 plugin

Plugin 前面有稍微提到如何使用 plugin ，不過我們有時候並不需要自己來建輪子， GitHub 上已經有很多人開發中出方便實用的工具，我們可以善加利用...

Nomi Su ‧ 2018-01-19

技術 [Vue.js] Vuex 學習筆記 (20) - Cheat Sheet 與結語

Cheat Sheet 這邊分享一個美觀又實用的 Vuex Cheat Sheet ，作者將 Vuex 會用到的功能全部列在清單中，對於我這種今天看完明天就忘記...

Nomi Su ‧ 2018-01-20

技術 [Vue.js] Vuex 學習筆記 (8) - actions 的核心概念

Actions Actions 類似於 mutations，但仍然有些不同： Action 提交（commit）的是 mutations ，而不是直接變更 s...

Nomi Su ‧ 2017-12-13

技術 vue & vuex 04 - 使用 vue-router 建構 Single Page Application

為什麼要使用 router ? 更方便讓我們切換兩個不同的頁面，而不是將所有功能寫在同一頁上面，利用 if 去切換 使用 vue-router 2.0 npm...

Jacky ‧ 2016-12-05

技術 vue & vuex 25 - Login - II (router auth、rouetr beforeEach)

昨天我們做了一個登入頁面，可是使用者還是可以任意轉跳到其他頁面，今天我們要讓其它頁面加上驗證項目，讓登入頁面變成我們的大門。 今天目標： 設定 router...

Jacky ‧ 2016-12-26

技術 [Vue.js] Vuex 學習筆記 (18) - 開發工具 Vue.js devtools

Vue.js devtools Vue.js devtools 是一個在開發時很實用的 Chrome 套件，我們可以在裡面檢查組件的資料，也可以查看 Vuex...

Nomi Su ‧ 2018-01-17

技術 [Vue.js] Vuex 學習筆記 (7) - mutations 的核心概念

Mutations 提交 mutations 是改變 Vuex 中 store 的唯一方式。 mutations 非常類似於組件中的事件（event），每個 m...

Nomi Su ‧ 2017-12-12

技術 vue & vuex 27 - 進階路由顯示 - multiples views、nested routes

今天我們將練習 vue-router 兩種進階顯示方式，多重顯示與巢狀路由，這樣的設計會讓我們的系統，搭配 router path 顯得語意化且更具結構性。 今...

Jacky ‧ 2016-12-28

技術 [Vue.js] Vuex 學習筆記 (17) - 帳號登入 pluging

前言 使用 Vuex 時我們一定會想到説可以應用在帳號登入，紀錄一些使用者的資訊，這邊我們來試著做一個帳號登入的功能。 Login Page 首先建立一個登入...

Nomi Su ‧ 2018-01-02

技術 [Vue.js] Vuex 學習筆記 (6) - mapState 與 mapGetters 合併使用

合併使用 我們在實際開發時， computed 內容並不會像前兩章的範例那樣簡單，有時我們需要將本地組件的 computed 或是 mapState 與 map...

Nomi Su ‧ 2017-12-11

技術 Day20 - [Components] 狀態管理 - Vuex

前面分別介紹完Vue的directives、options跟components後，從這天開始，我們開始要將我們備好的材料開始煮出一道道好菜了。 前面我們有提到...

Syuanhahaha ‧ 2018-01-08 ‧團隊30天熱度

技術 用範例理解 Vue.js #21：Vuex in Vuetify

圖片來源 延續之前的主題 Vuetify 中用到的技術大方向有： vue-router vuex vue-server-renderer webpack e...

HunterLiu ‧ 2017-12-31 ‧團隊露天廢物

技術 vuex (2)

vuex (2) Vue.js官方的狀態管理套件，本篇說明進階的Mutations用法及透過Dispatch Actions來引發Mutations Git...

JB ‧ 2018-11-21

技術 [Vue.js] Vuex 學習筆記 (14) - 購物車實例 component

前言 前面我們已經把 Vuex 的特性都解說完畢，應該對 Vuex 有初步的了解，但是如果沒有實作我們還是沒有辦法很熟悉，官方這邊提供了一個購物車的範例，我們就...

Nomi Su ‧ 2017-12-25

技術 Day 17：異步行動，同步變動－Vuex Actions、Mutations

Vuex 是個處理全域資料的狀態管理庫，採集中式管理方式，方便任何元件都能從中獲取狀態或觸發事件，實作上通常用來存儲 API 資料後再加以應用，尤其適合應用於開...

Teen ‧ 2021-10-02 ‧團隊好想工作室V5.0

技術 Day22 - [Vuex實作-購物車(2)] 商品頁面

我們將購物車分兩個主要頁面來寫：商品頁面與購物車頁面，這天我們先寫商品頁面。 前置作業：Vuex安裝、引入專案與新增Vuex需要的檔案 Vuex安裝 記得路...

Syuanhahaha ‧ 2018-01-10 ‧團隊30天熱度

達標好文 技術 主廚的話 - 餐點簡介與相關說明

Alex ‧ 2018-10-16 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

技術 [Vue.js] Vuex 學習筆記 (16) - 購物車實例 module

module 由於購物車與商品各自有許多不同的函數，為了未來維護上方便，我們將其拆成獨立的檔案，這樣在 store 中就不會一次出現很長一串的程式碼，這裡我們以...

Nomi Su ‧ 2017-12-28

技術 Day21 - [Vuex實作-購物車(1)] Vuex環境安裝與建立新專案

前一篇我們提到Vuex是將所有元件的**「狀態」全部集中儲存管理，那麼這個「狀態」**指的到底是什麼呢？ 這個「狀態」會區分成對元件的**「元件局部狀態」(Co...

Syuanhahaha ‧ 2018-01-09 ‧團隊30天熱度

技術 vuex (1)

vuex (1) Vue.js官方的狀態管理套件，本篇利用簡單範例來介紹入門用法 Github vuejs/vuex 安裝 $ npm install vu...

JB ‧ 2018-11-19

技術 Day23 - [Vuex實作-購物車(3)] 購物車頁面

今天我們將繼續寫購物車Vuex專案的第二個頁面：購物車頁面。 購物車頁面 1. 刻出UI介面：修改src/components/pages/shoppingC...

Syuanhahaha ‧ 2018-01-11 ‧團隊30天熱度

技術 [Vue.js] Vuex 學習筆記 (11) - 插件

插件（Plugin） Vuex 的 store 接受 plugins 選項，這個選項露出每個 mutation 的鉤子 (hook)， Vuex 插件就是一個函...

Nomi Su ‧ 2017-12-21

技術 [鼠年全馬] W39 - 使用Vuex管理資料狀態(下)

這週要繼續來探討 Vuex上週的文章傳送門 首先先回顧一下上週提到的 Store 中有這些東西: state: 存放資料狀態的物件，類似Vue元件中的 da...

技術 #12: Pages 簡單介紹與初建所有頁面功能

如果看過上一篇的 layout/default 的截圖，可以大概了解 blog 的樣子。 這邊先簡單拆分為兩個部分： 管理者相關(使用 layout/admi...

HunterLiu ‧ 2018-10-19 ‧團隊武裝狗狗

技術 [Vue.js] Vuex 學習筆記 (13) - 表單處理

表單處理 當在嚴格模式中使用 Vuex 時，state 使用在 v-model 時會遇到問題： <input v-model="obj.mes...

Nomi Su ‧ 2017-12-24

技術 [Vue.js] Vuex 學習筆記 (12) - 嚴格模式

嚴格模式 Strict Mode 開啟嚴格模式只需要在建立 store 時傳入 strict: true 。 const store = new Vuex.S...

Nomi Su ‧ 2017-12-22

技術 Day 28 Vuex state用法介紹

前言 昨天我們簡單介紹了何謂 Vuex、 Vuex 運作流程以及 Vuex 可以幫我們解決什麼問題。那我們今天就來了解一下Vuex 核心概念該如何使用吧！ 開始...

chunwen ‧ 2019-10-14

技術 [鼠年全馬] W38 - 使用Vuex管理資料狀態(上)

這週要來介紹一個很好用的套件 - Vuex 看到名稱應該馬上可以理解他就是Vue專案在使用的套件吧xD 有看過我之前的專案開發的文章的人，應該會發現我從來沒有用...

技術 Day29 Vuex Getter用法介紹

前言 今天要介紹的Getter，我們其實可以把它想像成Vue中的computed屬性。OK，那我們就開始吧！ Vuex Getter 介紹 使用時機：昨天我們介...

chunwen ‧ 2019-10-15

技術 Day 30 Vuex Mutations介紹 / 鐵人賽心得

前言 昨天介紹到 Vuex Getter 方法使用，那今天就接著介紹 Mutations 用法，那我們就開始摟～對了附註一提，這系列文章沒意外的話，我應該就繼續...

chunwen ‧ 2019-10-16