使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法

更新時(shí)間：2018年03月13日 14:57:26 作者：_我亦飄零

這篇文章主要介紹了使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

最近開始著手學(xué)習(xí) Vue，先大略的過(guò)了一遍官方文檔，跟著敲過(guò)一部分官方文檔中的 DEMO，然而還是不甚了了。在網(wǎng)上找到了一個(gè)入門的筆記應(yīng)用，即便是入門級(jí)的應(yīng)用，在學(xué)習(xí)途中依舊困難重重。特將學(xué)習(xí)作此筆記，方便今后回看，也希望能夠幫到剛開始學(xué)習(xí) Vue 的女同學(xué)

附原作者 Github 鏈接：https://github.com/lichenbuliren/vuex-notes-app2

預(yù)期目標(biāo)

筆記具備如下基本功能
1.新增
2.刪除
3.收藏
4.在全部筆記和收藏筆記間切換
5.在當(dāng)前列表中進(jìn)行搜索

賣家秀

買家秀

準(zhǔn)備工作

1.新建項(xiàng)目

選個(gè)文件夾存放項(xiàng)目，這里我用的是 Git Bush 執(zhí)行語(yǔ)句（$ 符號(hào)是 Git Bush 中自帶的），你也可以使用命令行，一樣的

選擇項(xiàng)目存放位置

2.查看模塊（愛(ài)看不看）

查看一下全局安裝的模塊 npm list --depth=0 -global

查看全局安裝的模塊

3.創(chuàng)建項(xiàng)目

在命令行輸入 vue init webpack vuex-note 并做好設(shè)置，創(chuàng)建一個(gè)項(xiàng)目

這都什么鬼

4.簡(jiǎn)單解釋一下各個(gè)配置都是干嘛的

vue init webpack vuex-note：初始化（init）一個(gè)使用 webpack 構(gòu)建工具構(gòu)建的 vue 項(xiàng)目，項(xiàng)目名為 vuex-note
Project name：項(xiàng)目名
Project description：項(xiàng)目描述
Author：朕
Vue build：構(gòu)建方式，分為獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建，具體說(shuō)明見如下鏈接，這里選擇獨(dú)立構(gòu)建 standalone https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
Install vue-router：是否需要安裝 vue-router ，跳轉(zhuǎn)頁(yè)面用的，這里用不著，我過(guò)會(huì)學(xué)
Use ESLint to lint your code：ESLint 規(guī)范與法用的，可能你熟悉的寫法都是不標(biāo)準(zhǔn)的，如果采用 ESLint 則可能報(bào)錯(cuò)，這里選擇 n
剩下的都是測(cè)試用的，一路 n
Should we run 'npm install' for you after the project has been created：是否需要直接替你安裝（npm install）相關(guān)的依賴，回車就行，之后會(huì)替你安裝各種玩意

5.安裝完后會(huì)有提示，我們接著按照提示走

先是 cd vuex-note 進(jìn)入剛剛創(chuàng)建的 vue 項(xiàng)目文件夾

安裝完成

再通過(guò) npm run dev 跑起項(xiàng)目

后續(xù)操作

6.訪問(wèn)頁(yè)面

此時(shí)通過(guò)瀏覽器訪問(wèn) localhost:8080 就可以打開一個(gè)新的 vue 頁(yè)面

嶄新的 vue 頁(yè)面

7.項(xiàng)目結(jié)構(gòu)

截止目前的項(xiàng)目結(jié)構(gòu)如圖

項(xiàng)目結(jié)構(gòu)

由于是初學(xué)，為了先搞個(gè)東西出來(lái)，所以暫時(shí)先不管一些亂七八糟的配置，只挑跟這次相關(guān)的說(shuō)（其實(shí)多了我也沒(méi)學(xué)到...）

8.查看 Vuex

既然是使用 Vuex 來(lái)實(shí)現(xiàn)筆記應(yīng)用，我們就應(yīng)該先查看一下構(gòu)建的項(xiàng)目是否包含 Vuex 模塊。

node_modules 文件夾包含了現(xiàn)有的模塊，然而里面并沒(méi)有我們想要的 Vuex，不信自己去看

package.json 文件描述了項(xiàng)目包含的文件，項(xiàng)目如何運(yùn)行等信息

package.json

9.安裝 Vuex

在命令行中輸入 npm install vuex --save：--save 就是將安裝信息寫入 package.json

已安裝了 Vuex

至此，所有前期工作已經(jīng)準(zhǔn)備完成，遺漏的部分將在實(shí)現(xiàn)過(guò)程中逐一解釋

搞起

零、思路

整個(gè)應(yīng)用可拆分為三個(gè)組件

拆

每條筆記包括編號(hào)（ID），標(biāo)題（title），內(nèi)容（content），是否已收藏（fav）四種信息
Vuex 中的 state 得有個(gè)地方存放所有的筆記（notes）
而收藏，刪除操作只能對(duì) 當(dāng)前的筆記進(jìn)行操作，因此我還需要一個(gè)標(biāo)識(shí)用來(lái)記錄當(dāng)前的筆記（activeNote）是哪個(gè)
包含全部和收藏兩種切換方式，因此還需要有一個(gè)標(biāo)識(shí)來(lái)進(jìn)行區(qū)分，就叫 show 吧，all 代表全部，fav 就代表已收藏
組件 ==> actions.js ==> mutations.js = > state：通過(guò)組件調(diào)用 actions 中的方法（dispatch），通過(guò) actions 中的方法調(diào)用 mutations 中的方法（commit），通過(guò) mutations 中的方法去操作 state 中的筆記列表（notes），當(dāng)前筆記（activeNote）等等

一、index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vuex-note</title>
 </head>
 <body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 </body>
</html>

這個(gè)沒(méi)什么說(shuō)的，注意 div 的 ID 就行

二、main.js

import Vue from 'vue'
import App from './App'
import store from './store'     

Vue.config.productionTip = false

new Vue({
 el: '#app',
 store,        
 components: { App },
 template: '<App/>'
})

1.在 import 時(shí)什么時(shí)候需要 ' ./ '？

從項(xiàng)目模塊中導(dǎo)出，引入時(shí)不需要 ./，而從自己寫的組件中引入時(shí)需要 ./

2.什么時(shí)候需要 import {aaa} from abc 這種加大括號(hào)的引入？什么時(shí)候不需要？

當(dāng) abc 中被導(dǎo)出的部分是 export aaa 時(shí)

當(dāng) import 的是被 export default 導(dǎo)出的部分時(shí)不加 {}，并且可以起個(gè)別名

3.項(xiàng)目結(jié)構(gòu)中并沒(méi)有 store 文件，只有 store 文件夾，那 import store from './store' 是什么意思？

不知道，求指教

4. new Vue 中單獨(dú)的 store 是什么意思？

ES6 的一種簡(jiǎn)寫方式，縮寫之前是 store:store，這句話的意思是為全局注入 Vuex，這樣在各個(gè)組件中都可以通過(guò) this.$store 去調(diào)用狀態(tài)庫(kù)，如果不在全局注入，則需要在每個(gè)組件中單獨(dú)引入，多了會(huì)很麻煩

三、store 下的 index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex)    

const defaultNote = {
  id: +new Date(),    
  title: '新建筆記' + new Date().getMilliseconds(),    // 加時(shí)間是為了做一下區(qū)分
  content: '筆記內(nèi)容',
  fav: false
}

// 可以理解為一個(gè)狀態(tài)的倉(cāng)庫(kù)  
const state = {
  notes: [defaultNote],      // 以數(shù)組方式存放所有的筆記
  activeNote: defaultNote,    // 用來(lái)記錄當(dāng)前筆記  
  show: 'all'           // 用于切換 全部 / 已收藏 兩種不同列表的標(biāo)識(shí)
}

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

1. Vue.use(Vuex) 是什么意思？

使用 Vuex，今后用 Vue-router 時(shí)也得來(lái)這么一出，只是得寫在 route 文件夾下的 index.js 文件中

2. +new Date() 是什么意思？

獲取時(shí)間戳的另一種寫法，等同于 new Date().getTime()

3.state，getters，mutations，actions 之間的關(guān)系？

state：如上所言狀態(tài)倉(cāng)庫(kù)

getters：state 的修飾，比如 state 中有 str:"abc" 這么個(gè)屬性，而在很多組件中需要進(jìn)行 str + "def" 的操作，如果在每個(gè)組件都進(jìn)行 str + "def" 的操作未免太麻煩，于是可以在 getters 中增加：

strAdd(){
  return this.str + "abc"
}

今后在組件中使用 strAdd 就可以了

mutations：簡(jiǎn)單講就是用來(lái)修改 state 的，同步方法.常規(guī)調(diào)用 this.$store.commit
actions：簡(jiǎn)單講用來(lái)調(diào)用 mutations 的，異步方法.常規(guī)調(diào)用 this.$store.dispatch

四、tool.vue

<template>
  <div id="tool">
    <button class="add" @click="add_note">新增</button>
    <button class="fav" @click="fav_note">收藏</button>
    <button class="del" @click="del_note">刪除</button>
  </div>
</template>
<script type="text/javascript">
  import { mapState, mapGetter, mapActions } from 'vuex'
  export default {
    name: 'tool',
    methods:{      
      ...mapActions(['add_note','del_note','fav_note'])
    }
  }
</script>
<style type="text/css" scoped>
  #tool {
    width: 200px;
    height: 600px;
    border: 2px solid #ccc;
    float: left;
  }
  
  button {
    width: 100%;
    height: calc(100% / 3);    
    font-size: 60px;
  }
</style>

1.mapState, mapGetter, mapActions 都是什么？

這里有個(gè)非常好的解釋 http://www.imooc.com/article/14741

此外，當(dāng) methods 和 Vuex 的 actions 中具有同名的屬性 A 時(shí)，可使用 mapActions(['A']) 這種方式簡(jiǎn)寫

注意：1、中括號(hào)不能省略；2、中括號(hào)內(nèi)是字符串；3、展開運(yùn)算符...不能省略

也可以取個(gè)別名，寫法如下，注意 [] 變成了 {}：

...map({
 本組件的屬性 : Vuex 中 actions 中的屬性
})

需要傳入?yún)?shù)時(shí)，前提是 actions 中的屬性（方法）能接收參數(shù)：

methods:{
 ...mapActions(['abc'])
 // 自定義一個(gè)方法，通過(guò)觸發(fā)這個(gè)方法調(diào)用之前重名的方法并傳入?yún)?shù)
 tragger_abc(參數(shù)){
  this.abc(參數(shù))
 }
}

2.scoped

對(duì)當(dāng)前組件生效的 CSS

3.calc

使用時(shí)記得在運(yùn)算符前后各加一個(gè)空格

五、list.vue

<template>
  <div id="list">
    <div class="switch">
      <button class="all" @click='get_switch_note("all")'>全部</button><button class="fav" @click='get_switch_note("fav")'>已收藏</button>
    </div>
    <div class="search">
      <input type="text" placeholder="在這里搜索" v-model="search" />
    </div>
    <div class="noteList">
      <div class="note" v-for="note in search_filteredNote" :class="{favColor:note.fav===true,active:note.id===activeNote.id}" @click='get_select_note(note)'>
        <div class="title">
          <p>{{note.title}}</p>
        </div>
        <div class="content">
          <p>{{note.content}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import { mapState, mapGetters, mapActions } from 'vuex'
  export default {
    name: 'list',
    data: function() {
      return {
        search: "" 
      }
    },
    computed: {
      ...mapState(['notes', 'activeNote']),
      ...mapGetters(['filteredNote']),
      // 二次過(guò)濾：在當(dāng)前列表(全部 或 已收藏)中進(jìn)行篩選,返回值被用在組件的 v-for 中 
      search_filteredNote() {
        if(this.search.length > 0) {    // 如果輸入框有值,返回二次過(guò)濾的結(jié)果并加載
          return this.filteredNote.filter(note => {
            if(note.title.indexOf(this.search) > 0) {
              return note
            }
          })
        } else {      // 輸入框沒(méi)值,不過(guò)濾,直接拿來(lái)加載
          return this.filteredNote
        }
      }
    },
    methods: {
      ...mapActions(['select_note', 'switch_note']), 
      get_select_note(note) {
        this.select_note(note)
      },
      get_switch_note(type) {
        this.switch_note(type)
      }
    }
  }
</script>
<style type="text/css" scoped="scoped">
  #list {
    width: 300px;
    height: 600px;
    border: 2px solid #ccc;
    float: left;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
  }
  
  p {
    margin: 0;
  }
  
  .switch {}
  
  .switch button {
    height: 60px;
    width: 50%;
    font-size: 40px;
  }
  
  .search {
    border: 1px solid #CCCCCC
  }
  
  input {
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    line-height: 50px;
    padding: 10px;
    outline: none;
    font-size: 20px;
    border: none;
  }
  
  .noteList {
    flex-grow: 1;
    overflow: auto;
  }
  
  .note {
    border: 1px solid #CCCCCC;
  }
  
  .favColor {
    background: pink;
  }
  
  .active {
    background: lightblue
  }
</style>

1.data 中的 search 是干嘛的？可不可以寫在 computed 中？

用來(lái)與搜索框進(jìn)行關(guān)聯(lián)?？梢詫懺?computed 中，但 computed 中的屬性默認(rèn)都是 getter ，就是只能獲取值，如果想修改，需要設(shè)置 setter ，詳見官方文檔

六、edit.vue

<template>
  <div id="edit">
    <div class="title">
      <input type="text" placeholder="在這里輸入標(biāo)題" v-model="activeNote.title"/>
    </div>
    <div class="content">
      <textarea name="" placeholder="在這里吐槽" v-model="activeNote.content"></textarea>
    </div>
  </div>
</template>
<script type="text/javascript">
  import { mapState, mapGetter, mapActions } from 'vuex'
  export default {
    name: 'edit',
    computed:{
      ...mapState(['activeNote'])   // 當(dāng)本組件中 computed 中的屬性名與 Vuex 中的 state 屬性名相同時(shí),就可以在 mapState() 中簡(jiǎn)寫
    }
  }
</script>
<style type="text/css" scoped="scoped">
  #edit {
    width: 300px;
    height: 600px;
    border: 2px solid #ccc;
    float: left;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
  }
  
  .title {
    border: 1px solid #CCCCCC;
  }
  
  input {
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    line-height: 50px;
    padding: 10px;
    outline: none;
    font-size: 20px;
    border: none;
  }
  
  .content {
    flex-grow: 1;
    background: orange;
    display: flex;
    flex-direction: column;
  }
  
  textarea {
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    resize: none;
    padding: 10px;
    font-size: 20px;
    outline: none;
    font-family: inherit;
  }
</style>

七、actions.js

export default {
  add_note({commit}) {
    commit('ADD_NOTE')
  },
  select_note({commit}, note) {
    commit("SELECT_NOTE", note)
  },
  del_note({commit}) {
    commit("DEL_NOTE")
  },
  fav_note({commit}) {
    commit("FAV_NOTE")
  },
  switch_note({commit}, type) {
    commit("SWITCH_NOTE", type)
  }
}

1.這是干什么？

這里的每個(gè)方法實(shí)際上是通過(guò) commit 調(diào)用 mutations.js 中的方法；

舉個(gè)栗子：tool.vue 的新增按鈕上綁了一個(gè) add_note 自定義方法，在 actions.js 中也定義一個(gè)同名的方法，這樣就可以在 tool.vue 中的 mapActions 中簡(jiǎn)寫，就是下面這句：

# tool.vue
...mapActions(['add_note','del_note','fav_note'])

而 actions.js 中的 add_note 去調(diào)用 mutations.js 中寫好的 ADD_NOTE 方法，而實(shí)際的添加操作也是在 ADD_NOTE 中，組件也好，actions 也好，最終只是調(diào)用 ADD_NOTE 。之所以這么做是因?yàn)?mutations 中的方法都是同步的，而 actions 中的方法是異步的，不過(guò)在本例里沒(méi)啥區(qū)別

八、getters.js

export default {
  filteredNote: (state) => {
    if(state.show === 'all') {
      return state.notes
    } else {
      return state.notes.filter((note) => {
        if(note.fav === true) {
          return note
        }
      })
    }
  }
}

實(shí)現(xiàn)一個(gè)過(guò)濾，根據(jù) show 來(lái)判斷展示全部筆記還是已收藏筆記

九、mutations.js

import { SWITCH_NOTE, ADD_NOTE, SELECT_NOTE, DEL_NOTE, FAV_NOTE } from './mutation-types'

export default {
  [ADD_NOTE](state, note = {
    id: +new Date(),
    title: '新建筆記' + new Date().getMilliseconds(),
    content: '筆記內(nèi)容',
    fav: false
  }) {
    state.notes.push(note)
    state.activeNote = note
  },
  [SELECT_NOTE](state, note) {
    state.activeNote = note
  },
  [DEL_NOTE](state) {
    for(let i = 0; i < state.notes.length; i++) {
      if(state.notes[i].id === state.activeNote.id) {
        state.notes.splice(i, 1)
        state.activeNote = state.notes[i] || state.notes[i - 1] || {}
        return
      }
    }
  },
  [FAV_NOTE](state) {
    state.activeNote.fav = !state.activeNote.fav
  },
  [SWITCH_NOTE](state, type) {
    state.show = type
  }
}

1.export default 那里看著好熟悉

ES6 函數(shù)的一種寫法，中括號(hào) + 常量作為函數(shù)名，這里常量從其它文件引入

十、mutation-types.js

export const ADD_NOTE = "ADD_NOTE"
export const SELECT_NOTE = "SELECT_NOTE"
export const DEL_NOTE = "DEL_NOTE"
export const FAV_NOTE = "FAV_NOTE"
export const SWITCH_NOTE = "SWITCH_NOTE"

拋出常量，mutations.js 中的函數(shù)常量就是這里拋出的，查資料說(shuō)是這么做便于一目了然都有那些方法。

當(dāng)然，根據(jù)個(gè)人習(xí)慣，你也可以不這么寫

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: