Vuex на самом деле очень прост, всего 3 шага

Vue.js

предисловие

В предыдущих проектах было более-менее места, где требовалась коммуникация между компонентами, и по разным причинам, Стоимость шины событий выше, чем vuex, поэтому для технического отбора выбран vuex, но я не знаю, почему, Некоторые новички в команде начали вздрагивать, когда услышали о vuex, потому что vuex — это сложно? Сегодня мы используем 3 простых шага, чтобы доказать, насколько прост vuex.

Это сугубо личный опыт, неточности неизбежны, если найдёте, прошу поправить!

Это вводный туториал, вводный туториал, вводный туториал для новичков

Шаг нулю

Создайте новый проект vue и установите vuex. Я не буду вдаваться в подробности. Если вы можете щелкнуть по нему, у вас есть эти навыки по умолчанию ^_^

первый шаг

создать новый.jsФайл, позиция имени произвольная, по соглашению рекомендуется находиться в/src/storeВ каталоге (если у вас его нет, создайте новый самостоятельно)

文件位置 /src/store/index.js

// 引入vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 这里需要use一下,固定写法,记住即可
Vue.use(Vuex)

// 直接导出 一个 Store 的实例
export default new Vuex.Store({
  // 类似 vue 的 data
  state: {
    name: 'oldName'
  },
  // 类似 vue 里的 methods(同步方法)
  mutations: {
    updateName (state) {
      state.name = 'newName'
    }
  }
})

Код выглядит немного больше, но кажется ли он знакомым, он не сильно отличается от обычного vue. Этот шаг на самом деле для создания нового магазина, но мы не использовали его в проекте.

второй шаг

Вставьте указанный выше файл в файл ввода и немного измените параметры, передаваемые в new Vue(),За новыми строками следуют примечания

文件位置 /src/main.js(Запись автоматически генерируется vue-cli, если можно обойтись без скаффолдинга, то объяснять не надо)

import Vue from 'vue'
import App from './App'
import vuexStore from './store'   // 新增

new Vue({
  el: '#app',
  store:vuexStore                 // 新增
  components: { App },
  template: '<App/>'
})

Совет: адрес после импорта хранилища из «./store» — это местонахождение нового файла, который мы создали выше (/src/store/index.js),

Поскольку я здесь index.js, его можно опустить.

третий шаг

Вышеупомянутые 2 шага, по сути, базовая настройка Vuex завершена, а затем используйте его.

文件位置 /src/main.js(Это также app.vue, сгенерированный vue-cli. Для удобства демонстрации я уберу здесь лишний код)

<template>
  <div>
    {{getName}}
    <button @click="changeName" value="更名">更名</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  computed:{
    getName(){
      return this.$store.state.name
    }
  },
  methods:{
    changeName () {
      this.$store.commit('updateName')
    }
  }
}
</script>

Вот очень распространенный vue-файл, разница в том, что нам нужно использовать вычисляемое свойство, чтобы получить егоstore 里的 "data"

Существует также, если мы хотим изменить данные, больше не использоватьthis.xxx = xxxИзмените на это.$store.commit('updateName')

Суммировать

Вы можете подумать, какой смысл делать это в приведенном выше примере, почему бы не использовать данные и методы vue напрямую?

Приведенный выше пример просто кратко объясняет, как использовать vuex, поэтому он упрощает некоторые процессы, представьте, что у вас есть такая страница: Всего вложено 10 слоев компонентов (то есть в подкомпоненте есть под-под-подкомпоненты, а под под-под-подкомпонентом есть под-под-под-компоненты, и так далее для 10 слоев ) Затем изменение данных в компоненте последнего слоя, чтобы уведомить компонент первого слоя, нам нужно изменить его только в компоненте нижнего слоя.this.$store.commit(), Затем используйте вычисляемое свойство самого внешнего компонента, чтобы получить соответствующее значение, которое можно обновлять в режиме реального времени.Нет необходимости $emit слой за слоем.

наконец

Я изначально хотел расширить геттер, действие+диспетчер, модульность и т.д. в конце, но чтобы быть достойным этого звания, пришлось поставитьДалее: Vuex на самом деле очень прост, после этих 3 шагов есть еще 3 шага

Если вы считаете, что эта статья полезна для вас, пожалуйста, дайтеgithubДобавь звезду, спасибо большое

Кроме того,githubНа сайте есть и другие туториалы и компоненты про передок.Заинтересованные детские туфли могут посмотреть.Ваша поддержка-моя самая большая мотивация.

Категории