首頁 > web前端 > js教程 > vuex專案結構目錄與設定使用詳解

vuex專案結構目錄與設定使用詳解

php中世界最好的语言
發布: 2018-05-02 10:16:00
原創
2269 人瀏覽過

這次帶給大家vuex專案結構目錄與設定使用詳解,使用vuex專案結構目錄與設定的注意事項有哪些,以下就是實戰案例,一起來看一下。

首先先正經的來一段官網的"忠告":

vuex需要遵守的規則:

一、應用層級的狀態應該集中到單一store 物件

二、提交 mutation 是更改狀態的唯一方法,而這個過程是同步的。

三、非同步邏輯都應該封裝到 action 裡面。

檔案目錄結構

檔案之間的關係:

store資料夾- 存放vuex的系列檔案

store.js - 引入vuex,設定state狀態數據,引入getter、mutation和action

#getter.js - 取得store內的狀態

##mutation.js -更改store中狀態用的函數的儲存之地

action.js - 提交mutation以達到委婉地修改state狀態,可非同步操作

簡單而又普通的寫法

store.js檔案:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

import Vue from 'vue'

import Vuex from 'vuex'

import actions from './actions'

import mutations from './mutations'

Vue.use(Vuex)

const state = {

 a: '初始值',

 b: 'balabala...'

}

export default new Vuex.Store({

  state,

  actions,

  mutations

})

登入後複製
main.js檔案中(從根元件注入store,就像注入router一樣):

透過在根實例中註冊store 選項,該store實例會注入到根元件下的所有子元件中,且子元件能透過this.$store 存取。

1

2

3

4

5

6

7

import store from './store/index'

new Vue({

 el: '#app',

 router,

 store,

 ...

})

登入後複製
Getter.js 的簡單設定( store 的計算屬性,接受state為參數)

1

2

3

4

5

export default {

  doneTodos: state = >{

   return state.todos.filter(todo = >todo.done)

  }

}

登入後複製
取得(某元件的計算屬性內部):

1

2

3

4

5

computed: {

 doneTodosCount () { 

  return this.$store.getters.doneTodosCount 

 }

}

登入後複製
可傳參的getter屬性的簡單設定

1

2

3

4

5

export default{

 getTodoById: (state) => (id) => { 

  return state.todos.find(todo => todo.id === id) 

 }

}

登入後複製
取得(某元件的計算屬性內部):

1

2

3

4

5

computed: {

 getTodoById() { 

  return this.$store.getters.getTodoById(‘参数')

 }

}

登入後複製
mutation.js簡單設定:

1

2

3

4

5

6

export default {

  increment(state) {

   //变更状态

   state.count++

  }

}

登入後複製
觸發(元件中)

1

2

3

4

5

6

7

8

9

10

11

this.$store.commit(state,payload)

actions.js简单配置:

export default{

 action (context) {

 //异步操作

  setTimeout(()=>{

   //变更状态

   context.commit('mutationFunName',value)

  })

 }

}

登入後複製
觸發(組件的)

1

2

this.$store.dispatch('mutationFunctionName')

2018-04-07 18:13:34

登入後複製
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

vue-router懶載入解決首次載入速度緩慢步驟詳解

vue2.0資源文件assets和static使用說明

Angular 5.x中Router使用詳解

以上是vuex專案結構目錄與設定使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板