怎么使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用-創(chuàng)新互聯(lián)

這個(gè)沒什么說的，注意 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: ''
})

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)中并沒有 store 文件，只有 store 文件夾，那 import store from './store' 是什么意思？

不知道，求指教

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

ES6 的一種簡寫方式，縮寫之前是 store:store，這句話的意思是為全局注入 Vuex，這樣在各個(gè)組件中都可以通過 this.$store 去調(diào)用狀態(tài)庫，如果不在全局注入，則需要在每個(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)的倉庫  
const state = {
  notes: [defaultNote],      // 以數(shù)組方式存放所有的筆記
  activeNote: defaultNote,    // 用來記錄當(dāng)前筆記  
  show: 'all'           // 用于切換 全部 / 已收藏 兩種不同列表的標(biāo)識(shí)
}

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

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

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

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

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

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

state：如上所言狀態(tài)倉庫

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

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

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

1. mutations：簡單講就是用來修改 state 的，同步方法.常規(guī)調(diào)用 this.$store.commit

2. actions：簡單講用來調(diào)用 mutations 的，異步方法.常規(guī)調(diào)用 this.$store.dispatch

四、tool.vue

  import { mapState, mapGetter, mapActions } from 'vuex'
  export default {
    name: 'tool',
    methods:{      
      ...mapActions(['add_note','del_note','fav_note'])
    }
  }


  #tool {
    width: 200px;
    height: 600px;
    border: 2px solid #ccc;
    float: left;
  }
  
  button {
    width: 100%;
    height: calc(100% / 3);    
    font-size: 60px;
  }

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

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

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

注意：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è)方法，通過觸發(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

  import { mapState, mapGetters, mapActions } from 'vuex'
  export default {
    name: 'list',
    data: function() {
      return {
        search: "" 
      }
    },
    computed: {
      ...mapState(['notes', 'activeNote']),
      ...mapGetters(['filteredNote']),
      // 二次過濾：在當(dāng)前列表(全部 或 已收藏)中進(jìn)行篩選,返回值被用在組件的 v-for 中 
      search_filteredNote() {
        if(this.search.length > 0) {    // 如果輸入框有值,返回二次過濾的結(jié)果并加載
          return this.filteredNote.filter(note => {
            if(note.title.indexOf(this.search) > 0) {
              return note
            }
          })
        } else {      // 輸入框沒值,不過濾,直接拿來加載
          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)
      }
    }
  }


  #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
  }

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

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

六、edit.vue

  import { mapState, mapGetter, mapActions } from 'vuex'
  export default {
    name: 'edit',
    computed:{
      ...mapState(['activeNote'])   // 當(dāng)本組件中 computed 中的屬性名與 Vuex 中的 state 屬性名相同時(shí),就可以在 mapState() 中簡寫
    }
  }


  #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;
  }

七、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í)際上是通過 commit 調(diào)用 mutations.js 中的方法；

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

# 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 中的方法是異步的，不過在本例里沒啥區(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è)過濾，根據(jù) show 來判斷展示 全部筆記 還是 已收藏筆記

九、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ù)常量就是這里拋出的，查資料說是這么做便于一目了然都有那些方法。

以上是“怎么使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。