Резюме вопросов интервью Vuex

Vuex — это плагин управления состоянием, разработанный для приложений Vue.js. Он использует централизованное хранилище для управления состоянием всех компонентов приложения, и единственный способ изменить состояние — это зафиксировать мутации, например.this.$store.commit('SET_VIDEO_PAUSE', video_pause,SET_VIDEO_PAUSEдля методов, определенных в свойстве мутаций .

решить две проблемы

• Когда несколько компонентов зависят от одного и того же состояния, будет очень громоздко передавать параметры многоуровневым вложенным компонентам, а передавать состояние между одноуровневыми компонентами будет бессильно.
• Поведение различных компонентов требует изменения одного и того же состояния. В прошлом несколько копий состояния изменялись и синхронизировались путем прямой ссылки на родительские и дочерние компоненты или посредством событий. Приведенные выше шаблоны очень хрупкие и часто приводят к невозможности сопровождения кода.

Когда проект сталкивается со следующими двумя сценариями

• Когда несколько компонентов зависят от одного и того же состояния.
• Поведение различных компонентов требует изменения одного и того же состояния.

• Сначала установите зависимостиnnpm install vuex --save
• Создайте папку хранилища в каталоге проекта src
• Создайте новый файл index.js в папке магазина и напишите

  import Vue from 'vue';
  import Vuex from 'vuex';
  Vue.use(Vuex);
  //不是在生产环境debug为true
  const debug = process.env.NODE_ENV !== 'production';
  //创建Vuex实例对象
  const store = new Vuex.Store({
      strict:debug,//在不是生产环境下都开启严格模式
      state:{
      },
      getters:{
      },
      mutations:{
      },
      actions:{
      }
  })
  export default store;
  

• Затем введите Vuex в файл main.js, напишите так

  import Vue from 'vue';
  import App from './App.vue';
  import store from './store';
  const vm = new Vue({
      store:store,
      render: h => h(App)
  }).$mount('#app')
  

Используйте вспомогательную функцию mapState, чтобы смешать состояние с вычисляемым объектом с помощью оператора расширения объекта.

import {mapState} from 'vuex'
export default{
    computed:{
        ...mapState(['price','number'])
    }
}

Геттер принимает два параметра: первый — это состояние, а второй — геттеры (которые можно использовать для доступа к другим геттерам).

const store = new Vuex.Store({
    state: {
        price: 10,
        number: 10,
        discount: 0.7,
    },
    getters: {
        total: state => {
            return state.price * state.number
        },
        discountTotal: (state, getters) => {
            return state.discount * getters.total
        }
    },
});

Затем в компоненте вы можете использовать вычисляемое свойство, вычисленное для передачиthis.$store.getters.totalЭто способ доступа к этим производным переходам.

computed: {
    total() {
        return this.$store.getters.total
    },
    discountTotal() {
        return this.$store.getters.discountTotal
    }
}

Передача параметров геттеру достигается за счет того, что геттер возвращает функцию. Затем по параметрам оценивается состояние, соответствующее требованиям в состоянии.

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

Затем в компоненте вы можете использовать вычисляемое свойство, вычисленное для передачиthis.$store.getters.getTodoById(2)Это способ доступа к этим производным переходам.

computed: {
    getTodoById() {
        return this.$store.getters.getTodoById
    },
}
mounted(){
    console.log(this.getTodoById(2).done)//false
}

Используйте вспомогательную функцию mapGetters для смешивания геттеров с вычисляемыми объектами с помощью оператора распространения объекта.

import {mapGetters} from 'vuex'
export default{
    computed:{
        ...mapGetters(['total','discountTotal'])
    }
}

Используйте вспомогательную функцию mapGetters для смешивания геттеров с вычисляемыми объектами с помощью оператора распространения объекта.

import {mapGetters} from 'vuex'
export default{
    computed:{
        ...mapGetters({
            myTotal:'total',
            myDiscountTotal:'discountTotal',
        })
    }
}

Сначала зарегистрируйте мутацию в мутациях

const store = new Vuex.Store({
    state: {
        number: 10,
    },
    mutations: {
        SET_NUMBER(state,data){
            state.number=data;
        }
    },
});

использовать в компонентеthis.$store.commitОтправить мутацию, изменить номер

this.$store.commit('SET_NUMBER',10)

Используйте вспомогательную функцию mapMutations, подобную этой, в компоненте

import { mapMutations } from 'vuex'
methods:{
    ...mapMutations({
        setNumber:'SET_NUMBER',
    })
}

тогда позвониthis.setNumber(10)вполне зоветthis.$store.commit('SET_NUMBER',10)

• Действия вызывают мутации, а не изменения состояния напрямую. Мутации могут напрямую изменять состояние.
• action может содержать произвольные асинхронные операции. Мутации могут быть только синхронными операциями.
• Метод подачи отличается, действие используетсяthis.$store.dispatch('ACTION_NAME',data)представить. мутация используетсяthis.$store.commit('SET_NUMBER',10)представить.
• Параметры приема разные, первый параметр мутации — состояние, а первый параметр действия — контекст, который содержит

  {
      state,      // 等同于 `store.state`，若在模块中则为局部状态
      rootState,  // 等同于 `store.state`，只存在于模块中
      commit,     // 等同于 `store.commit`
      dispatch,   // 等同于 `store.dispatch`
      getters,    // 等同于 `store.getters`
      rootGetters // 等同于 `store.getters`，只存在于模块中
  }
  

Второй параметр может принимать параметры, отправленные внешней отправкой.this.$store.dispatch('ACTION_NAME',data)иthis.$store.commit('SET_NUMBER',10)

Используйте вспомогательную функцию mapActions, подобную этой, в компоненте

methods:{
    ...mapActions({
        setNumber:'SET_NUMBER',
    })
}

тогда позвониthis.setNumber(10)вполне зоветthis.$store.dispatch('SET_NUMBER',10)

Возвратите Promise в функцию действия, а затем обработайте его с помощью then при отправке

actions:{
    SET_NUMBER_A({commit},data){
        return new Promise((resolve,reject) =>{
            setTimeout(() =>{
                commit('SET_NUMBER',10);
                resolve();
            },2000)
        })
    }
}
this.$store.dispatch('SET_NUMBER_A').then(() => {
  // ...
})

Используйте ES6asyncиawaitреализовать.

actions:{
    async actionA({commit}){
        //...
    },
    async actionB({dispatch}){
        await dispatch ('actionA')//等待actionA完成
        // ... 
    }
}

Да, потому что с одним деревом состояний все состояния приложения будут объединены в один более крупный объект. Когда приложение становится очень сложным, объект хранилища может сильно раздуться. Итак, разделите магазин на модули. Каждый модуль имеет свое состояние, мутации, действия, геттеры и даже вложенные подмодули, которые разбиваются таким же образом сверху вниз.

Создайте файлы moduleA.js и moduleB.js в файле модуля. записать в файл

const state={
    //...
}
const getters={
    //...
}
const mutations={
    //...
}
const actions={
    //...
}
export default{
    state,
    getters,
    mutations,
    actions
}

Затем импортируйте модуль в index.js.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import moduleA from './module/moduleA'
import moduleB from './module/moduleB'
const store = new Vuex.Store({
    modules:{
        moduleA,
        moduleB
    }
})
export default store

• В геттере доступ к глобальному состоянию можно получить через третий параметр rootState, а к глобальному геттеру можно получить доступ через четвертый параметр rootGetters.
• При мутации глобальный satat и геттер недоступны, доступ возможен только к локальному состоянию.
• В первом контексте параметра в действииcontext.rootStateдоступ к глобальному состоянию,context.rootGettersДоступ к глобальному геттеру.

• непосредственно черезthis.$store.gettersиthis.$store.stateдля доступа к геттерам и состоянию в модуле.
• непосредственно черезthis.$store.commit('mutationA',data)Зафиксируйте мутацию в модуле.
• непосредственно черезthis.$store.dispatch('actionA,data')Отправьте действие в модуле.

По умолчанию действия, мутации и геттеры внутри модуля регистрируются в глобальном пространстве имен. Если имена действий и мутаций в нескольких модулях совпадают, то отправка мутаций и действий вызовет одни и те же мутации во всех модулях. , действие.

Это слишком сильно связано. Если вы хотите сделать свой модуль более инкапсулированным и пригодным для повторного использования, вы можете добавитьnamespaced: trueспособ сделать его модулем с пространством имен.

export default{
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}

Просто передайте { root: true } в качестве третьего параметра для отправки или фиксации.

this.$store.dispatch('actionA', null, { root: true })
this.$store.commit('mutationA', null, { root: true })

actions: {
    actionA: {
        root: true,
        handler (context, data) { ... }
    }
  }

this.$store.commit('moduleA/mutationA',data)

первое использованиеcreateNamespacedHelpersСоздайте вспомогательную функцию на основе пространства имен

import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('moduleA');
export default {
    computed: {
        // 在 `module/moduleA` 中查找
        ...mapState({
            a: state => state.a,
            b: state => state.b
        })
    },
    methods: {
        // 在 `module/moduleA` 中查找
        ...mapActions([
            'actionA',
            'actionB'
        ])
    }
}

Плагин Vuex — это функция, единственным параметром которой является store. Представлен в плагинах опций конструктора Vuex.Store. Записать в файл store/plugin.js

export default function createPlugin(param){
    return store =>{
        //...
    }
}

Затем напишите в файле store/index.js

import createPlugin from './plugin.js'
const myPlugin = createPlugin()
const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

• Методы экземпляра Vuex.StoresubscribeОтправить изменение в прослушивающем компоненте
• Методы экземпляра Vuex.StoresubscribeActionОтправить действие в компоненте прослушивателя Записать в файл store/plugin.js

export default function createPlugin(param) {
    return store => {
        store.subscribe((mutation, state) => {
            console.log(mutation.type)//是那个mutation
            console.log(mutation.payload)
            console.log(state)
        })
        // store.subscribeAction((action, state) => {
        //     console.log(action.type)//是那个action
        //     console.log(action.payload)//提交action的参数
        // })
        store.subscribeAction({
            before: (action, state) => {//提交action之前
                console.log(`before action ${action.type}`)
            },
            after: (action, state) => {//提交action之后
                console.log(`after action ${action.type}`)
            }
        })
    }
}

Затем напишите в файле store/index.js

import createPlugin from './plugin.js'
const myPlugin = createPlugin()
const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

Его необходимо преобразовать с помощью вычисляемых свойств.

<input v-model="message">
// ...
computed: {
    message: {
        get () {
            return this.$store.state.message
        },
        set (value) {
            this.$store.commit('updateMessage', value)
        }
    }
}

Включите его в опции конструктора Vuex.Store, как показано ниже.

const store = new Vuex.Store({
    strict:true,
})