Блог

Главная - Вопросы по программированию - Синтаксис трех периодов в Vuex?

Синтаксис трех периодов в Vuex?

#vuex

#vuex

Вопрос:

Я не уверен в том, что делает mapstate, кроме этого, что бы … значило перед ним. Я нигде не вижу этого так много в руководстве, как в примерах репозиториев.

 computed: {
  ...mapState({
    messages: state => state.messages
  })
}

Ответ №1:

Когда вы создаете большое приложение с помощью Vuex,

вам придется управлять своим хранилищем в одном месте, а не разделять их,

например, у вас большое хранилище, и в хранилище много состояний:

 const store =
{
    states: 
    {
        todo:
        {
             notes   : { ... },
             username: { ... },
             nickname: { ... }
        },
        checklist:
        {
             list: { ... }
        }
    } 
}

если вы хотите их использовать, вы могли бы просто сделать это

 computed:
{
    ...mapState(['todo', 'checklist'])
}

так что вам не нужно

 computed:
{
    todo()
    {
        return this.$store.state.todo
    },
    checklist()
    {
        return this.$store.state.checklist
    }
}

а затем используйте их следующим образом:

 todo.notes
todo.usernames
checklist.list

Комментарии:

1. Я бы добавил, что вы могли бы просто сделать computed: mapState(['todo']) , но у вас не могло быть локальных вычисляемых свойств, используя три точки (оператор распространения) (заключенный в фигурные скобки, вы включаете все реквизиты mapState в свой объект и затем можете определить дополнительные локальные properties..so это что-то вроде слияния обоих объектов Object.assign()

2. @CanRau Вы должны вставить свой комментарий в ответ! Мне потребовался день, чтобы понять, зачем нам нужно использовать Spread Synxtax в mapGetters или mapState и т. Д. В документах Vuex пример очень короткий и неясный. Я понятия не имел, можем ли мы использовать его напрямую, как computed: mapState([ ]) или computed: getters([ ]) когда у нас нет каких-либо локальных вычисляемых свойств или нет

3. 👍 Хороший момент, спасибо, что нашли время, чтобы сделать это, чтобы люди могли быстрее его найти 👏

Ответ №2:

Как ответил @Can Rau, я постараюсь более четко объяснить, что на самом ... деле делает синтаксис распространения h3ll в mapGetter mapState и mapActions в Vuex.

Во-первых, вы можете использовать непосредственно mapState синтаксис as: computed: mapState without Spread ... , когда у вас нет каких-либо локальных вычисляемых свойств.

То же самое с mapGetters и mapActions 

 
computed: mapState({
    count: state => state.count,
    },

computed: {
  ...mapState({
     count: state => state.count,
  })
}

Оба вышеперечисленных действия делают одно и то же!

Но если у вас есть какое-либо локальное вычисляемое свойство, тогда вам нужен синтаксис распространения.

Это потому, что mapState возвращает объект. И затем нам нужен оператор распространения объекта для объединения нескольких объектов в один.

 computed: {
  localComputed () { /* ... */ },
  // mix this into the outer object with the object spread operator
  ...mapState({
    // ...
  })
}

Вы можете прочитать больше о распространении в объектных литералах в MDN

По сути, в этой ситуации он использовался для объединения объектов

 let obj = {a: 1, b: 2, c: 3}
let copy = {...obj}
// copy is {a: 1, b: 2, c: 3}

//without ..., it will become wrong
let wrongCopy = {obj}
// wrongCopy is { {a: 1, b: 2, c: 3} } - not what you want

И документы Vuex объясняют это довольно ясно. Посмотрите глубже, и вы поймете идею.