解決 CSS 困境的 scoped style
在使用Vue Cli開發時，Vue是將每個組件(副檔名.vue)拆封成HTML、CSS、JavaScript三個部分，也就是如下：
<template>
//這裡寫HTML
</template>
<script>
//這裡寫JavaScript
</script>
<style&
Vue.js
Vuex 存放狀態的State
在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions
State內負責存放初始資料，裡面可以放任何東西：物件、陣列、數值、字串...etc 只要我們後續Vuex有用到，就應該先在State宣告其存在，就算是空值、空字串、空陣列也沒關係。
因為一但在之後的Mutations突然寫了一個未先宣告的State資料，Vuex不會當場動態產生這個變數資料出來，就會報錯。 (想像成寫程式，會用到什麼都要在編輯器最上方先宣告變數存在)
但還是有辦法的，如果要臨時在Mutations新建一個State資料，要這樣寫
Vuex 變更狀態的 Mutations
在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions
每個 Mutations 都包含了兩個要素：
* 函式名字
* 函式內的功能
而寫在Mutations內的函式，是唯一能直接改變State的值的Vuex方法。例如先前Vuex 引入與範例筆記的 store.js
const store = new Vuex.Store({
state:{
count:0,
},
mutations:
Vuex 發出指令的 Actions
在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions
延續Vuex系列筆記 如果要進行非同步的AJAX，就要在Actions裡面操作
例如我們在store.js裏面用fetch，去AJAX(舉例說明而已)
import Vue from 'vue';
import Vuex from 'vuex';
Vue.
Vuex Modules 模組劃分
假如今天的專案有很多組件，並且有很多功能需要Vuex來管理， 那麼Vuex的State、Mutations、Getters、Actions可能會塞太多東西，變得臃腫龐大。
例如今天在store.js是這樣的 我們有很多功能像是代辦清單(todos)、購物車(cart)、產品(product)...etc 這些功能全寫進一個Vuex store，那麼store之後會變得太過攏長
import Vue from ‘vue';
import