Что такое VueJS? Каковы основные особенности VueJS? 6

150.Как вы добавляете store в дочерние компоненты?

Vuex предоставляет механизм для «внедрения» хранилища во все дочерние компоненты из корневого компонента с опцией хранилища. Он будет включен vue.use (vuex).

Например, давайте внедрим в наш компонент приложения, как показано ниже

const app = new Vue({
el: '#app',
// предоставить хранилище, используя опцию “store”.
// это внедрит экземпляр хранилища во все дочерние компоненты.

store,
components: { Greeting },

template: `

`
})
Теперь магазин будет внедрен во все дочерние компоненты корня и будет доступен в них как this. $ Store

//давайте создадим компонент hello world

const Greeting = {
template: `

{{ greet }}

`,
computed: {
greet() {
return this.\$store.state.msg;
},
},
};

151.Что такое помощник mapState?

В приложении Vuex создание вычисляемого свойства каждый раз, когда мы хотим получить доступ к свойству состояния хранилища или получателю, будет повторяться и повторяться, особенно если компоненту требуется более одного свойства состояния. В этом случае мы можем использовать помощник mapState vuex, который генерирует для нас вычисленные функции получения.

Давайте рассмотрим пример приращения, чтобы продемонстрировать помощник mapState,

//в полных сборках помощники представлены как Vuex.mapState
import { mapState } from "vuex";

export default {

// ...
computed: mapState({
// стрелочные функции могут сделают код очень лаконичным!
username: (state) => state.username,

// передача строкового значения 'username' такая же, как 'state => state.username`

usernameAlias: "username",

//для доступа к локальному состоянию с помощью `this` должна использоваться обычная функция

greeting(state) {
return this.localTitle + state.username;
},
}),
};

Мы также можем передать массив строк в mapState, когда имя сопоставленного вычисляемого свойства совпадает с именем поддерева состояния.

computed: mapState([
// сопоставьте this.username с store.state.username
'username'
])