Vue.js

在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions  State內負責存放初始資料，裡面可以放任何東西：物件、陣列、數值、字串...etc 只要我們後續Vuex有用到，就應該先在State宣告其存在，就算是空值、空字串、空陣列也沒關係。 因為一但在之後的Mutations突然寫了一個未先宣告的State資料，Vuex不會當場動態產生這個變數資料出來，就會報錯。 (想像成寫程式，會用到什麼都要在編輯器最上方先宣告變數存在) 但還是有辦法的，如果要臨時在Mutations新建一個State資料，要這樣寫 Vue.set(state,’資料名稱’,’ ‘值'); 要讀取Vuex的值，我們會在(.Vue)組件的</script>的computed寫一些計算回傳的方法去讀值 export default { computed:{  //<————————寫在這裡 count(){   //<————————要讀取的Vuex對應值的方法 return this.$store.

在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions 每個 Mutations 都包含了兩個要素： * 函式名字 * 函式內的功能 而寫在Mutations內的函式，是唯一能直接改變State的值的Vuex方法。例如先前Vuex 引入與範例筆記的 store.js const store = new Vuex.Store({ state:{ count:0, }, mutations:{ addCount(state){ state.count += 1; } } }); 我們不該在mutations內突然使用個我們沒在state宣告的屬性(值)，想要這麼做要在mutations寫 Vue.set(state,’資料名稱’,’ ‘值'); 在mutations內動態用vuex的set去新增state的內容 如果是要新增state內物件的新屬性也可以用這種方式 const store = new Vuex.Store({ state:{ count:0, box:

在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions 延續Vuex系列筆記 如果要進行非同步的AJAX，就要在Actions裡面操作 例如我們在store.js裏面用fetch，去AJAX(舉例說明而已) import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state:{ todos:[ ], }, actions:{ ajaxTodos(store){ fetch(`$(url)/todos`) .then(re => re.json()) .then(ajax到的東西 => { //呼叫某個函式更新state }) } } }); export

假如今天的專案有很多組件，並且有很多功能需要Vuex來管理， 那麼Vuex的State、Mutations、Getters、Actions可能會塞太多東西，變得臃腫龐大。 例如今天在store.js是這樣的 我們有很多功能像是代辦清單(todos)、購物車(cart)、產品(product)...etc 這些功能全寫進一個Vuex store，那麼store之後會變得太過攏長 import Vue from ‘vue'; import Vuex from ‘vuex’; Vue.use(Vuex); const store = new Vuex.Store({ state:{ todos:[ ], cart:[ ], product:[ ], //…etc }, mutations:{ //…etc }, //下略... }); 這種時候我們可以用Modules來幫我們適當地拆開、劃分不同Vuex物件， 把const store = new Vuex.

在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions 如果把Vuex用Vue實例的屬性來比喻(注：這樣比喻是錯的 不精準得，但方便聯想) state存放資料類似data Mutations設定方法函式讓人能主動呼叫、觸發，類似methods 那Getters呢？ Getters類似computed 例如現在store.js中是這樣 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({  state:{     todos:[ ],  },  getters:{  } }); export default store; state裡有個陣列todos代辦清單，現在我們想知道有哪些代辦是沒做的？ 我們可能會在(.vue)組件這樣寫(注意這只是範例說明，

範例1. 如果是<script>引入進vue.js，那就<script>引入vuex <script src='<https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js>'> 首先，const常數store指向一個新建好的Vuex.Store建構式物件實體 const store = new Vuex.Store({ state:{ count:0, }, mutations:{ addCount(state){ state.count += 1; } } }) Vuex.