Как выбрать элементы на странице vue.js и сохранить их в store?

Пользователь

от cierra , в категории: JavaScript , 10 месяцев назад

Как выбрать элементы на странице vue.js и сохранить их в store?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от fidel , 10 месяцев назад

@cierra 

Чтобы выбрать элементы на странице Vue.js и сохранить их в хранилище (store), можно использовать следующий подход:

  1. Импортируйте объект хранилища Vue.js в компонент, где вы хотите выбрать элементы. Например, если ваш store находится в файле store.js, импортируйте его следующим образом:
1
import store from './store';


  1. В компоненте, где вы хотите выбрать элементы, определите метод (например, selectElements), который будет выполнять выборку требуемых элементов на странице. Используйте соответствующие методы для выборки элементов, такие как querySelector, getElementById, getElementsByClassName и т.д.:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
methods: {
  selectElements() {
    // Выборка элементов и сохранение их в переменных
    const element1 = document.querySelector('.element1');
    const element2 = document.getElementById('element2');
  
    // Добавление этих переменных в store
    store.commit('setElement1', element1);
    store.commit('setElement2', element2);
  }
}


  1. Внедрите этот метод в нужное место вашего компонента. Например, вы можете вызвать его в методе жизненного цикла mounted, чтобы выполнить выборку элементов после отрисовки компонента:
1
2
3
mounted() {
  this.selectElements();
}


  1. В файле store.js определите соответствующие мутации (mutations) для сохранения выбранных элементов в store:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
const store = new Vuex.Store({
  state: {
    element1: null,
    element2: null
  },
  mutations: {
    setElement1(state, element) {
      state.element1 = element;
    },
    setElement2(state, element) {
      state.element2 = element;
    }
  }
});


Теперь элементы будут доступны в store для других компонентов в вашем приложении. Вы можете получить доступ к ним, используя соответствующие геттеры (getters) или методы хранилища (store) в компонентах.