super-vuex怎么用

小編給大家分享一下super-vuex怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

vuex與super-vuex

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

適用場景

在繁重的中后臺項(xiàng)目中，引入vuex的作用如下：

1. 全局?jǐn)?shù)據(jù)共享，組件數(shù)據(jù)邏輯解耦

2. 數(shù)據(jù)業(yè)務(wù)接口分離

3. 數(shù)據(jù)模塊化管理，利于多人協(xié)作

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

使用體驗(yàn)

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

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

由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對象就有可能變得相當(dāng)臃腫。

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

自動(dòng)將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ù)路徑至關(guān)重要，它是一個(gè)數(shù)據(jù)的直觀路徑字符串，也就是上面[ChildVuex].value 數(shù)據(jù)定義的數(shù)據(jù)路徑。

'load.allow'

可以取到load模塊的allow屬性

二、操作方法

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

Vuex：

// 提交一個(gè)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):獲取一個(gè)getter屬性；例：store.sub.get('subs')

2. commit(name, data):提交處理一個(gè)屬性；例：store.user.commit('age', data)

3. push(name, ...data):提交一個(gè)數(shù)據(jù)的push行為

4. pop(name):提交一個(gè)數(shù)據(jù)的pop行為

5. unshift(name, ...data):提交一個(gè)數(shù)據(jù)的unshift行為

6. shift(name): 提交一個(gè)數(shù)據(jù)的shift行為

7. splice(name, arguments):用法同Array.prototype.splice

8. dispatch(name, data):個(gè)async/await型的調(diào)用函數(shù)。與Vuex中的dispatch一致，用于出發(fā)setAction定義的行為

不僅如此，super-vuex還提供自定義模式可以覆蓋掉默認(rèn)給你提供的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`中是一個(gè)數(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ù)響應(yīng)。

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: {
 // 使用對象展開運(yùn)算符將 getter 混入 computed 對象中
  ...mapGetters([
   'doneTodosCount',
   'anotherGetter',
   // ...
  ])
 }

super-vuex:

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

非常簡約地完成getter，響應(yīng)式getter

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

[ChildVuex].setGetter(path, cb)

自定義或覆蓋模塊中相應(yīng)getter的屬性，相當(dāng)于原生vuex的getter屬性。

覆蓋原有的getter

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

以上是“super-vuex怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！