一步一步學習Vue（十一）
阿新 • • 發佈：2017-08-04
head move 就會 基本 參數 mode onclick set stat 
本篇繼續學習vuex，還是以實例為主；我們以一步一步學Vue（四）中講述的例子為基礎，對其改造，基於vuex重構一遍，這是原始的代碼：
todolist.js
; (function () { var list = []; var Todo = (function () { var id = 1; return function (title, desc) { this.title = title; this.desc = desc; this.id = id++; } })();View Code/** * 搜索組件 */ var SearchBar = { template: ` <div class="row toolbar"> <div class="col-md-8"> keyword： <input type="text" v-model="keyword" /> <input type="button" @click="search()" value="search" class="btn btn-primary" /> </div> </div> `, data:function () { return { keyword: ‘‘ } }, methods: { search: function () { this.$emit(‘onsearch‘, this.keyword); } } } /** * 表單組件 */ var TodoForm = { template: `<div class="col-md-6"> <div class="form-inline"> <label for="title" class="control-label col-md-4">title:</label> <input type="hidden" v-bind:value="todo.id" /> <input type="text" v-model="todo.title" class="form-control col-md-8"> </div> <div class="form-inline"> <label for="desc" class="control-label col-md-4">desc</label> <input type="text" v-model="todo.desc" class="form-control col-md-8"> </div> <div class="form-inline"> <input type="button" value="OK" v-on:click="ok()" class="btn btn-primary offset-md-10" /> </div> </div> `, props: [‘initItem‘], computed: { todo: function () { return { id: this.initItem.id, title: this.initItem.title, desc: this.initItem.desc }; } }, methods: { ok: function () { this.$emit(‘onsave‘, this.todo); } } } /** * 列表項組件 */ var TodoItem = { template: ` <tr> <th>{{todo.id}}</th> <td>{{todo.title}}</td> <td>{{todo.desc}}</td> <td> <input type="button" value="remove" @click="remove()" class="btn btn-danger" /> <input type="button" value="edit" @click="edit()" class="btn btn-info" /> </td> </tr> `, props: [‘todo‘], methods: { edit: function () { console.log(this.todo); this.$emit(‘onedit‘, this.todo.id); }, remove: function () { this.$emit(‘onremove‘, this.todo.id); } } } /** * 列表組件 */ var TodoList = { template: ` <div class="col-md-6"> <table class="table table-bordered"> <tr> <th></th> <th>title</th> <th>desc</th> <th></th> </tr> <todo-item v-for="item in items" :todo="item" :key="item.id" @onedit="edit($event)" @onremove="remove($event)"></todo-item> </table> </div> `, props: [‘items‘], components: { ‘todo-item‘: TodoItem }, methods: { edit: function ($e) { this.$emit(‘onedit‘, $e); }, remove: function ($e) { this.$emit(‘onremove‘, $e); } } } /** * 容器組件 * 說明：容器組件包括三個字組件 */ var TodoContainer = { template: ` <div class="container"> <search-bar @onsearch="search($event)"></search-bar> <div class="row"> <todo-list :items="items" @onremove="remove($event)" @onedit="edit($event)"></todo-list> <todo-form :init-item="initItem" @onsave="save($event)" ></todo-form> </div> </div> `, data: function () { return { /** * Todolist數據列表 * 說明：通過props傳入到Todolist組件中，讓組件進行渲染 */ items: [], /** * TodoForm初始化數據 * 說明：由於TodoForm包括兩種操作：新增和編輯；新增操作無需處理，編輯操作需要進行數據綁定，這裏通過傳入initItem屬性進行編輯時數據的初始化 * 如果傳入的值為空，說明為新增操作，由initItem參數的Id是否為空，來確認是更新保存還是新增保存 */ initItem: { title: ‘‘, desc: ‘‘, id: ‘‘ } } }, components: { ‘search-bar‘: SearchBar,/**SearchBar組件註冊 */ ‘todo-form‘: TodoForm,/**TodoForm組件註冊 */ ‘todo-list‘: TodoList/**TodoList組件註冊 */ }, methods: { /** * 模擬保存數據方法 * 輔助方法 */ _mock_save: function (lst) { list = lst; }, /** * 根據id查詢對象 * 輔助方法 */ findById: function (id) { return this.items.filter(v => v.id === id)[0] || {}; }, /** * 查詢方法 * 由SearchBar組件觸發 */ search: function ($e) { this.items = list.filter(v => v.title.indexOf($e) !== -1); }, /** * 保存方法 * 響應新增和更新操作，由TodoForm組件觸發 */ save: function ($e) { //id存在則為編輯保存 if (this.initItem.id) { var o = this.findById($e.id); o.title = $e.title; o.desc = $e.desc; } else { this.items.push(new Todo($e.title, $e.desc)); } this.initItem = { id: ‘‘, title: ‘‘, desc: ‘‘ }; this._mock_save(this.items); }, /** * 刪除方法 * 響應刪除按鈕操作 * 由TodoItem組件觸發 */ remove: function ($e) { this.items = this.items.filter(v => v.id !== $e); this._mock_save(this.items); }, /** * 編輯按鈕點擊時，進行表單數據綁定 */ edit: function ($e) { this.initItem = this.findById($e); } } } var app = new Vue({ el: ‘#app‘, components: { ‘todo-container‘: TodoContainer } }); })(); /** * * * <div id="app"> * <todo-container></todo-container> * </app> */
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>demo1</title> <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/vuex/2.3.1/vuex.js"></script> </head> <body class="container"> <div id="app"> <todo-container></todo-container> </div> <script src="./todolist.js"></script> </body> </html>
註意要在html頁面引入vuex的路徑，我們這裏直接使用cdn上的庫，開始我們的重構
第一步：創建全局store
在vuex中，store是全局唯一的，我們在上一篇文章中也介紹了其基本創建方式，修改todolist.js,添加如下代碼：
var store=new Vuex.Store({ state:{ //TODO:狀態 }, mutations:{ //TODO:改變狀態的方法 } }) var app = new Vue({ store:store, el: ‘#app‘, components: { ‘todo-container‘: TodoContainer } });
上述代碼表示store已經創建，並且註入到註冊組件中了，在任何組件中都可以通過this.store來訪問state和提交mutation，這裏再簡單說一下mutaiton，其實我們可以把mutation當成事件來理解，在store定義的時候，創建mutation，我們可以認為是mutation的註冊，就如我們去註冊普通的事件一樣，內容都是key和value，其中key是事件的全局表示，value是事件的回調函數，類比mutation，定義是註冊，模式還是func：function（）{}的模式，在我們做commit（“mutation”）的時候相當於觸發事件，這時候就會執行我們註冊的回調函數。
第二步，我們把共享狀態進行提取：
var store=new Vuex.Store({ state:{ items:[] // todoContainer中items,initItem: { title: ‘‘, desc: ‘‘, id: ‘‘ },//初始化表單所用
}, mutations:{ //TODO:改變狀態的方法 } })
就下來，我們把所有改變state的方法，都通過註冊mutation的方式來重構，在vuex中，一定要通過mutation來改變狀態：
mutations: { search: function (state, payload) { state.items = list.filter(v => v.title.indexOf(payload.title) !== -1); }, save: function (state, payload) { if (state.initItem.id) { var o = list.filter(v => v.id === payload.id); o.title = payload.title; o.desc = payload.desc; state.items=state.items.map(v=>{ if(v.id==payload.id){ return payload; } return v; }); } else { state.items.push(new Todo(payload.title, payload.desc)); } list = state.items; }, remove: function (state, payload) { state.items = state.items.filter(v => v.id !== payload.id); }, edit: function (state, payload) { state.initItem = state.items.filter(v => v.id === payload.id)[0]; } }
我們添加的上述幾個mutations，包括search、save、remove、edit，由於在每一個組件中都可以訪問到this.$store,那麽我們就不用對事件一層一層的傳遞啦，我們只需要在需要調用的地方，commit對應的mutation即可，比如search操作就是在searchbar組件中，那麽我們沒必要傳遞到父組件中來觸發，基於此，我們修改SearchBar組件：
/** * 搜索組件 */ var SearchBar = { template: ` <div class="row toolbar"> <div class="col-md-8"> keyword： <input type="text" v-model="keyword" /> <input type="button" @click="search()" value="search" class="btn btn-primary" /> </div> </div> `, data: function () { return { keyword: ‘‘ } }, methods: { search: function () { this.$store.commit("search", { title: this.keyword }); } } }
這裏看起來沒有簡單好多，但是我們至少不用把我們的事件往上級送了，可以對比最初代碼，同理對我們的其它組件都進行重構：
/** * 表單組件 */ var TodoForm = { template: ` <div class="col-md-6"> <div class="form-inline"> <label for="title" class="control-label col-md-4">title:</label> <input type="hidden" v-bind:value="todo.id" /> <input type="text" v-model="todo.title" class="form-control col-md-8"> </div> <div class="form-inline"> <label for="desc" class="control-label col-md-4">desc</label> <input type="text" v-model="todo.desc" class="form-control col-md-8"> </div> <div class="form-inline"> <input type="button" value="OK" v-on:click="ok()" class="btn btn-primary offset-md-10" /> </div> </div> `, props: [‘initItem‘], computed: { todo: function () { return { id: this.initItem.id, title: this.initItem.title, desc: this.initItem.desc }; } }, methods: { ok: function () { this.$store.commit("save",this.todo); } } } /** * 列表項組件 */ var TodoItem = { template: ` <tr> <th>{{todo.id}}</th> <td>{{todo.title}}</td> <td>{{todo.desc}}</td> <td> <input type="button" value="remove" @click="remove()" class="btn btn-danger" /> <input type="button" value="edit" @click="edit()" class="btn btn-info" /> </td> </tr> `, props: [‘todo‘], methods: { edit: function () { this.$store.commit(‘edit‘,this.todo); }, remove: function () { this.$store.commit(‘remove‘,{id:this.todo.id}); } } } /** * 列表組件 */ var TodoList = { template: ` <div class="col-md-6"> <table class="table table-bordered"> <tr> <th></th> <th>title</th> <th>desc</th> <th></th> </tr> <todo-item v-for="item in items" :todo="item" :key="item.id" ></todo-item> </table> </div> `, props: [‘items‘], components: { ‘todo-item‘: TodoItem } } /** * 容器組件 * 說明：容器組件包括三個字組件 */ var TodoContainer = { template: ` <div class="container"> <search-bar></search-bar> <div class="row"> <todo-list :items="items" ></todo-list> <todo-form :init-item="initItem" ></todo-form> </div> </div> `, components: { ‘search-bar‘: SearchBar,/**SearchBar組件註冊 */ ‘todo-form‘: TodoForm,/**TodoForm組件註冊 */ ‘todo-list‘: TodoList/**TodoList組件註冊 */ }, computed: { initItem: function () { return this.$store.state.initItem; }, items: function () { return this.$store.state.items; } } }
首先看一下我們的TodoContainer組件，裏面已經清爽了好多，原來所有的邏輯，所有的屬性，都匯集在這裏，現在每個組件的邏輯都是它自己負責，表單組件負責保存操作，所以在其中提交commit（“save”）；todo組件負責編輯和刪除，所以在其方法中封裝了remove和edit的mutaiton的訪問。至此，我們的代碼可以正常運行，由於只是對前文demo的重構，這裏不再貼出運行效果圖。
小結，在store中定義的狀態，是響應式的，對其中狀態的改變會導致view的重新渲染，改變狀態只能通過提交mutation。由於其狀態的響應式，所以我們在訪問時一般定義成計算屬性，如TodoContainer組件中的initItem和items；一般來說，不是所有狀態都要定義到vuex的store中，每個組件都會有自己私有狀態，只有全局或者共享狀態才適合定義在store中，所以在實際開發中，需要好好斟酌；本篇就到此為止，其實算是上篇的一個延伸，下一篇介紹Actions，會繼續在本篇demo的基礎上進行延伸，敬請期待。
一步一步學習Vue（十一）