Vuex input pobieranie danych

Question

Witam, piszę program i chcę przejść na vuex, mianowicie szukam wskazówki jak z modułu vuex  w którym mam w state daną  pustą wartość (store > modules >search.js ), teraz chcę za pomocą mapState pobrać ją do komponentu (components > movies.vue) szukałem wskazówek na stronie vuex ale nic mi nie wychodziło . Drugie pytanie to jak w pliku movies.vue mam polę input i chcę żeby użytkownik mógł wpisując zmieniać wartość w pliku search.js .

Comments

szukałem wskazówek na stronie vuex ale nic mi nie wychodziło 

W jaki sposób próbowałeś? Czy Twój moduł w storze ma własny namespace?

---

const axios = require('axios');


const state = {
    movie: ' ',
  }
  
  const getters = {
    getMovie(state){
        return (state.movie)
    }
  }
   
  const mutations = {
  
  }
  
  const actions = {
      movevalue: function (){
        axios.get(`http://www.omdbapi.com/?t='${state.movie}'&apikey=3f487e0e`)
        .then((response) => {
        this.resoults = console.log(response);
      })
    }
  }
  
  export default {
    state,
    mutations,
    getters,
    actions
  }
  

tak wtgląda moduł search.js , i chcę żeby komponent movies.vue ( z inputa ) wysyłał do pola state movie (w search.js).

Answer 1

jak z modułu vuex  w którym mam w state daną  pustą wartość (store > modules >search.js ), teraz chcę za pomocą mapState pobrać ją do komponentu

// components/movie.vue
{
  computed: {
    ...mapState(['movie'])
    // ...
  }
  // ...
}

 Drugie pytanie to jak w pliku movies.vue mam polę input i chcę żeby użytkownik mógł wpisując zmieniać wartość w pliku search.js.

Jeśli chcesz podpiąć input bezpośrednio pod wartość ze store'a, sytuacja wygląda odrobinę inaczej. Najprościej po prostu podpiąć wartość pod v-model

<input type="text" v-model="$store.state.movie">

jednak jest to niezalecana metoda. W idealnym świecie, każda zmiana state powinna odbywać się przez mutacje.

W tym momencie przestaje być już tak różowo, bo trzeba napisać trochę nudnego/powtarzalnego kodu. Two way computed property:

<input type="text" v-model="movie">

// components/movie.vue
{
  computed: {
    movie: {
      get () {
        return this.$store.state.movie
      },
      set (value) {
        this.$store.commit('updateMovie', value)
      }
    }
  }
  // ...
}

Plus do tego mutacja:

// store/modules/search.js
{
  // ...
  mutations: {
    updateMovie (state, movie) {
      state.movie = movie
    }
  }
  // ...
}

Ale wtedy vue-toolsy mogą wszystko ładnie trackować, i nic w aplikacji nie dzieje się samo w jakichś dziwnych miejscach w templatkach. (W dodatku przy zagnieżdżonym state (czego powinno się unikać), to de facto jedyna metoda, która pozwala zachować reaktywność store'a)

---

Jeśli potrzebujesz odczytać wartość ze state'a, nie ma potrzebny tworzyć do niej gettera.

Comments

tylko mam jeszcze jedno pytanie, bo mapaction działa, pobiera funkcje z modułu vuex a gdybym analogicznie chiał zrobić mapstate pobierająć z modułu ?

---

https://vuex.vuejs.org/guide/modules.html#namespacing

Dodaj do modułu:

namespaced: true

---

import Vue from 'vue'
import Vuex from 'vuex'

import searchmove from './modules/searchmove'

Vue.use(Vuex)

export const store = new Vuex.Store({
    modules: {
      namespaced: true,
      searchmove
    }
  }) 

tak dodać ?

Jeszcze mam małe pytanie, czy jest jakaś dobra opcja, żeby dodać 2 fukcje do buttona z @click

 

---

Do modułu - na tym samym poziomie na którym są state, mutations, actions

---

Czy dobra opcja - to nie wiem. Sam pomysł nie wygląda najlepiej. Ale tak, da się:
@click="metodaX(); metodaY()"