JavaScript

假如今天的專案有很多組件，並且有很多功能需要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.

延續先前 Vuex 筆記，其實我們要註冊引入vuex，可以不用在main.js引入註冊vuex，但這種方法不推薦。 不推薦的寫法 main.js import Vue from 'vue'; import App from './App.vue'; //註解 import store from './store'; new Vue({ //註解 store, el: '#app', render: h => h(App) }) 改到app.vue的<script>引入 import

首先用vue cli建立專案，這裡用webpack-simple模板建立 vue init webpack-simple 專案名稱 cd 專案名稱 npm install nom rub dev 接著安裝vue router npm install -s vue-router 編輯器或IDE打開專案，要用Vue-router，首先到main.js檔案上方import程式碼區塊新增 import 名稱 from 'vue-router' 這裡我這樣寫 import VueRouter from 'vue-router' 接著程式碼在「import」和「new Vue({」區塊間新增 Vue.use(名稱) 因為我import的名稱是VueRouter，所以程式碼自然是新增 Vue.use(

我們會用props來獲取資料，但是如果是直接定義在HTML的模板： 假設組件的props是 props: ['myData'] HTML的模板要寫 <div :my-data = "data"></div> 因為HTML沒有大寫 假設是寫在JS、.vue組件內的template，用字串模板` ` template:`<div :myData = "data"></div>` 就沒有大寫的限制囉！ vue組件的props：[ ]是單向資料流，也是就是由上而下的傳遞資料，跟v-model的雙向綁定不一樣。