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

@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) в компонентах.