title: load more button with vuex ,axios and json server
body: <p>I am practice for using Vuex and Axios .
  I get API  using Json server to simulate backend.
  I found a problem in  how to send page number in axios.get params as variable .</p>
  <p>when press in loadMore button I got this error</p>
  <p><strong>the error :</strong>
  Uncaught DOMException: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.</p>
  <p><strong>my code:</strong></p>
  <hr />
  <p><em>store.js</em></p>
  <pre><code>import Vue from &quot;vue&quot;;
  import Vuex from &quot;vuex&quot;;
  
  import axios from 'axios'
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    state: {
      blogs:[],
      page:1,
    },
    getters:{
      
    },
    mutations: {
      // storing data in blogs from database from actions parameters.
      setBlogs:(state,blogs)=&gt;{
        return state.blogs = state.blogs ? state.blogs.concat(blogs) : blogs
      },
      pageNumber(state){
        state.page++
      }
    },
    actions: {
      getBlogs({commit,state}) {
         //  let pageN =1;
        axios.get('http://localhost:3000/blogs', { 
          params: {
            _page:state.page++,
            _limit:8
          }
        })
        .then(response =&gt; {
          console.log(response);
          
          commit('setBlogs', response.data)
        }).catch(function (error) {
          console.log(error);
        })
  
  
        // axios.get(`http://localhost:3000/blog?_page=${page}&amp;_limit=6`).then((res) =&gt;{
        //    this.blogs = this.blogs? this.blogs.concat(res.data) : res.data;
        //    //for hidden read more button when reach to end of blogs no more blogs.
        //   // res.headers['x-total-count'] ==&gt; bring total count of blogs that bring from db
        //   this.totalPageCount = res.headers['x-total-count'];
  
  
  
    },
    getPageNumber(context){
      context.commit('pageNumber')
      }
    },
    modules: {},
  });
  </code></pre>
  <p><strong>in home.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;home&quot;&gt;
      &lt;blog-header&gt;
        &lt;h1&gt;Blog&lt;/h1&gt;
      &lt;/blog-header&gt;
      &lt;div class=&quot;container&quot; v-if=&quot;blogs&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;blog-card
            class=&quot;blog col-md-4 col-lg-3&quot;
            v-for=&quot;blog in blogs&quot;
            :key=&quot;blog.id&quot;
            :blogData=&quot;blog&quot;
          &gt;
          &lt;/blog-card&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;button class=&quot;btn btn-primary&quot; @click=&quot;loadMore&quot;&gt;Load More&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import BlogHeader from &quot;../components/blogHeader&quot;;
  import BlogCard from &quot;../components/blogCard&quot;;
  
  export default {
    data() {
      return {};
    },
    computed: {
      blogs() {
        return this.$store.state.blogs;
      },
      page() {
        return this.$store.state.page;
      },
    },
    methods: {
      loadMore (){
        this.$store.dispatch(&quot;getPageNumber&quot;);
      },
    },
    mounted() {
      this.$store.dispatch(&quot;getBlogs&quot;);
    },
  
    components: {
      BlogHeader,
      BlogCard,
    },
  };
  &lt;/script&gt;
  
  
  </code></pre>