欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談super-vuex使用體驗

 更新時間：2018年06月25日 13:47:25   作者：不一樣的doger  
super-vuex是一套用于簡化Vuex的數(shù)據(jù)架構。這篇文章主要介紹了淺談super-vuex使用體驗，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

vuex與super-vuex

super-vuex是一套用于簡化Vuex的數(shù)據(jù)架構。

適用場景

在繁重的中后臺項目中，引入vuex的作用如下：

  1. 全局數(shù)據(jù)共享，組件數(shù)據(jù)邏輯解耦
  2. 數(shù)據(jù)業(yè)務接口分離
  3. 數(shù)據(jù)模塊化管理，利于多人協(xié)作

super-vuex在這三種需求下都是和原生vuex的功能相同，在vuex原有功能上將mutation和action的定義和傳導機制改良為函數(shù)的寫法，在簡易數(shù)組改動邏輯的使用上提供push、pop、shift、unshift、splice的方法，可以在與、組件中自動地完成mutation，以及數(shù)據(jù)引用的路徑化，你可以通過load.allow去取到load模塊下的allow屬性。

使用體驗

下面通過簡單的demo比較下原生vuex和super-vuex使用細節(jié)上的不同。

一、狀態(tài)模塊化

由于使用單一狀態(tài)樹，應用的所有狀態(tài)會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。

Vuex:

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
}

const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
}

const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB
 }
})

store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)

super-vue

自動將mutation邏輯執(zhí)行，因此異步邏輯寫在commit中即可，相比之下節(jié)省了代碼量

import { ChildVuex } from "super-vuex";

const child = new ChildVuex('...');

child.value = { ... };

child.setCommit = {...};



const Main = new SuperVuex();

Main.setModule(child);

export default Main.init();

路徑式獲取子模塊數(shù)據(jù)

數(shù)據(jù)路徑，在之后的所有方法中，數(shù)據(jù)路徑至關重要，它是一個數(shù)據(jù)的直觀路徑字符串，也就是上面[ChildVuex].value 數(shù)據(jù)定義的數(shù)據(jù)路徑。

'load.allow'

可以取到load模塊的allow屬性

二、操作方法

super-vuex的操作方法上告別了以往同步數(shù)組操作的繁雜過程，比如在以往的vuex模式中實現(xiàn)一個對數(shù)組的操作是效率偏低的，先在mutation中定義方法操作，后在action中commit或是在組件中commit，super-vuex很好的解決了這個問題，提供了一系列基礎的數(shù)組操作方法讓你操作數(shù)組非常簡單。

Vuex：

// 提交一個commit
store.commit({
 type: 'increment',
 amount: 10
})

mutations: {
 // push
 increment (state, n) {
  state.arr = = [...state.arr, n]
 }
 // pop
 popArr(state) {
   state.arr = arr.pop()
 }
 // shift
 shiftArr(state) {
   state.arr.shift()
 }
 // unshift
 unshift(state) {
   state.arr.unshift('students', {
    name: 'huaping1',
    age: 302
   })
 }
 // deleteStudent
 deleteStudent(state) {
  state.arr.splice('students', 0, 1);
 },
}
...

super-vuex：

super-vuex在commit這層提供了一系列的操作api，提高了數(shù)據(jù)傳遞的效率

  child.setCommit('increment', (state, n) => {
    state.count += n;
});
changeName() {
  this.$store.user.commit('name', 'someone');
},
changeAllow() {
  this.$store.user.commit('load.allow', false);
  
},
pushStudent() {
  this.$store.user.push('students', {
    name: 'huaping',
    age: 300
  });
},
pushSubs() {
  this.$store.sub.push('subs', 10);
},
popSubs() {
  this.$store.sub.pop('subs');
},
unshiftStudent() {
  this.$store.user.unshift('students', {
     name: 'huaping1',
     age: 302
  });
},
shiftStudent() {
  this.$store.user.shift('students')
},
deleteStudent() {
  this.$store.user.splice('students', 0, 1);
},
gets() {
  his.$store.user.dispatch('load.data');
}

方法列表function

  1. get(name):獲取一個getter屬性；例：store.sub.get('subs')
  2. commit(name, data):提交處理一個屬性；例：store.user.commit('age', data)
  3. push(name, ...data):提交一個數(shù)據(jù)的push行為
  4. pop(name):提交一個數(shù)據(jù)的pop行為
  5. unshift(name, ...data):提交一個數(shù)據(jù)的unshift行為
  6. shift(name): 提交一個數(shù)據(jù)的shift行為
  7. splice(name, arguments):用法同Array.prototype.splice
  8. dispatch(name, data):個async/await型的調(diào)用函數(shù)。與Vuex中的dispatch一致，用于出發(fā)setAction定義的行為

不僅如此，super-vuex還提供自定義模式可以覆蓋掉默認給你提供的api，

child.setPushCommit(path, callback<(state, data)>);
child.setUnShiftCommit(path, callback<(state, data)>);
child.setPopCommit(path, callback<(state)>);
child.setShiftCommit(path, callback<(state)>);
  
// 注意splice使用方法，在`data`中是一個數(shù)組
child.setSpliceCommit(path, callback<(state, data)>);
  1. [ChildVuex].setPushCommit 數(shù)組的push操作行為
  2. [ChildVuex].setUnShiftCommit 數(shù)組的unshift操作行為
  3. [ChildVuex].setSpliceCommit 數(shù)組的splice操作行為
  4. [ChildVuex].setPopCommit 數(shù)組的pop操作行為
  5. [ChildVuex].setShiftCommit 數(shù)組的Shift操作行為

三、Getter

在組件內(nèi)使用store中的數(shù)據(jù)，vuex通常是把getter放入computed中，使組件產(chǎn)生數(shù)據(jù)響應。

Vuex:

const store = new Vuex.Store({
 state: {
  todos: [
   { id: 1, text: '...', done: true },
   { id: 2, text: '...', done: false }
  ]
 },
 getters: {
  doneTodos: state => {
   return state.todos.filter(todo => todo.done)
  }
 }
})


// in component
computed: {
 // 使用對象展開運算符將 getter 混入 computed 對象中
  ...mapGetters([
   'doneTodosCount',
   'anotherGetter',
   // ...
  ])
 }

super-vuex:

this.store.doneTodos.get('todos')

非常簡約地完成getter，響應式getter

當然想使用原生的getter也是OK的，輔助方法adjFunction(對ChildVuex自動生成的屬性進行覆蓋或自定義)

[ChildVuex].setGetter(path, cb)

自定義或覆蓋模塊中相應getter的屬性，相當于原生vuex的getter屬性。

覆蓋原有的getter

child.setGetter('load.total', state => {
  return state.load.total + 100;
});
/* 調(diào)用$store.user.get('load.total') 
 * 返回 200
 */

@cevio github

@doc

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論