title: Testing vuex with cypress
body: <p>I’m using Cypress in my Vue.js project (Nuxt.js). The main problem I can’t managed is how to understand the vuex store is ready. Let’s say I have a button that can call axios to fetch some data. Then the data came in to the store by mutations and Vue will render it in a template. The next element I want to interact with is empty before the store has built. But the cypress is trying to check it. </p>
  
  <p>How to call next cypress action (like cy.get) after the store has built? </p>
  
  <p>My project is more complicated. But the core problem is that cypress sometimes don’t wait for store building and trying to work further. For the first time we have used <code>cy.wait(1000)</code>, but it seems not so perfect decision.</p>
  
  <pre><code>&lt;div&gt;
      &lt;button data-cy="fetchDataBtn" @click="fetchData"&gt;get items&lt;/button&gt;
      &lt;ul&gt;
          &lt;li v-for="item in items"&gt;
             &lt;p&gt;{{ item.title }}&lt;/p&gt;
             &lt;button
                  @click="fetchProduct(item.id)"
              &gt;
                  buy {{ item.name }}
              &lt;/button&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt; 
  
      &lt;script&gt;
      import { mapState } from 'vuex';
      export default {
          name: 'App',
          computed: {
              ...mapState('list', ['items'])
          }
      } 
      &lt;/script&gt;
  </code></pre>
  
  <p>I expect the scenario below:</p>
  
  <pre><code>cy.get([‘data-cy=fetchDataBtn’]).click()
  // wait for store is ready and list is already rendered 
  // (NOT cy.wait('GET', 'url_string') or cy.wait(milliseconds))
  cy.contains(‘button’, 'buyItemName').click()
  </code></pre>