Изучение исходного кода в проекте Vuex Пример (1)

прилавок

код работает

Загрузите код с github (https://github.com/vuejs/vuex).

npm install

Вы можете столкнуться с ошибками следующим образом

[email protected] install: `node install.js`

может быть выполнен

npm install --ignore-scripts
npm run dev

Проект может работать. Вы можете получить доступ к проекту через http://localhost:8080.

структура проекта

• прилавок
  • app.js
  • Counter.vue
  • index.html
  • store.js

Эффект проекта

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

угадай общую идею

Прежде чем вы начнете читать код, вы также можете смело размышлять над идеей реализации. Затем сравните код и научитесь совершенствоваться.

Эта демонстрация посвящена коду vuex. Так что само собой разумеется, что это должно быть реализовано vuex. Тогда общая идея реализации проекта должна состоять в том, чтобы использовать состояние vuex для записи count, а затем реализовать метод инкремента и метод декремента в мутациях. При нажатии кнопки значение счетчика может быть увеличено или уменьшено. Затем нам нужна операция, которая может отслеживать, является ли подсчет техническим или даже в реальном времени Это может быть достигнуто с помощью геттеров. Что касается двух кнопок сзади. Первый можно реализовать, написав метод в мутациях для оценки и добавления или добавив методы в действия. Последняя кнопка является асинхронной и может быть реализована только в действиях. По структуре проекта нам не составит труда догадаться, что код vuex записан в store.js. Counter.vue реализует вызов данных интерфейса к vuex.

Конкретная реализация кода

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    
    
  count: 0
}

const mutations = {
    
    
  increment (state) {
    
    
    state.count++
  },
  decrement (state) {
    
    
    state.count--
  }
}

const actions = {
    
    
  increment: ({
    
     commit }) => commit('increment'),
  decrement: ({
    
     commit }) => commit('decrement'),
  incrementIfOdd ({
    
     commit, state }) {
    
    
    if ((state.count + 1) % 2 === 0) {
    
    
      commit('increment')
    }
  },
  incrementAsync ({
    
     commit }) {
    
    
    return new Promise((resolve, reject) => {
    
    
      setTimeout(() => {
    
    
        commit('increment')
        resolve()
      }, 1000)
    })
  }
}


const getters = {
    
    
  evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

export default new Vuex.Store({
    
    
  state,
  getters,
  actions,
  mutations
})

То, что реализовано в store.js, мало чем отличается от того, что я предполагаю.

Примечание:

1. Если код vuex написан в отдельном классе, а затем представлен другими классами, нам нужно использовать export defaultсинтаксис для его достижения.
2. Код в примере инкапсулирует изменения в действиях.

<template>
  <div id="app">
    Clicked: {
    
    {
    
     $store.state.count }} times, count is {
    
    {
    
     evenOrOdd }}.
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">Increment if odd</button>
    <button @click="incrementAsync">Increment async</button>
  </div>
</template>

<script>
import {
    
     mapGetters, mapActions } from 'vuex'

export default {
    
    
  computed: mapGetters([
    'evenOrOdd'
  ]),
  methods: mapActions([
    'increment',
    'decrement',
    'incrementIfOdd',
    'incrementAsync'
  ])
}
</script>

Вызов vuex реализован в Counter.vue. Мы можем научиться просто вводить действия в вызывающий компонент. Использование mapGetters и mapActions.

Полученные очки знаний

1. Если код vuex написан в отдельном классе, а затем представлен другими классами, нам нужно использовать export defaultсинтаксис для его достижения.
2. Код в примере инкапсулирует изменения в действиях.
3. Использование mapGetters и mapActions.

демо очень простое. Начните первым.