title: I need to learn vuex in short time because and i cant figure out how to migrate my vue js to vuex?
body: <p>This is my github page and you can see what i have done in the help branch: <a href="https://github.com/maltin1234/blog" rel="nofollow noreferrer">https://github.com/maltin1234/blog</a></p>
  <p>I need to change the code in the components but i dont know how.</p>
  <h2>CreateComponent.vue</h2>
  <pre><code>    &lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;Create A Post&lt;/h1&gt;
      &lt;form @submit.prevent=&quot;addPost&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-md-6&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label&gt;Post Title:&lt;/label&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; v-model=&quot;post.title&quot; /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-md-6&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label&gt;Post Body:&lt;/label&gt;
              &lt;textarea
                class=&quot;form-control&quot;
                v-model=&quot;post.body&quot;
                rows=&quot;5&quot;
              &gt;&lt;/textarea&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;br /&gt;
        &lt;div class=&quot;form-group&quot;&gt;
          &lt;button class=&quot;btn btn-primary&quot;&gt;Create&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  export default {
  
  &lt;script&gt;
  export default {
    name: &quot;CreateComponent&quot;,
    data() {
      return {
        title: &quot;&quot;,
      };
    },
    methods: {
      ...mapActions([&quot;addPost&quot;]),
      onSubmit(e) {
        e.preventDefault();
        this.addPost(this.title);
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <hr />
  <p>I have a node js backend and i want my vuex to fetch those endpoints. The node js backend consists of a mongodb connection and a model with articles. This is my try with vuex.</p>
  <p>post.js (vue.js project)</p>
  <pre><code>import axios from &quot;axios&quot;;
  
  const state = {
    posts: [],
  };
  
  const getters = {
    allPosts: (state) =&gt; state.Posts,
  };
  
  const actions = {
    //an action: makes a request, gets a response and calls a mutation
    async fetchPosts({ commit }) {
      // commit - to call the mutation
      const response = await axios.get(&quot;http://localhost:4000/posts&quot;);
      commit(&quot;setPosts&quot;, response.data);
    },
    async addPosts({ commit }, title) {
      const response = await axios.post(&quot;&quot;, { title, completed: false });
      commit(&quot;newPost&quot;, response.data);
    },
    async deletePosts({ commit }, id) {
      await axios.delete(`http://localhost:4000/posts/delete/${id}`);
      commit(&quot;removePosts&quot;, id);
    },
    async filterPosts({ commit }, e) {
      //Get selected number
      // const limit = parseInt(e.target.options[e.target.options.selectedIndex].innerText);
      const limit = e.target.value;
      const response = await axios.get(`http://localhost:4000/posts`);
      commit(&quot;setPosts&quot;, response.data);
    },
    async updatePosts({ commit }, updatePosts) {
      const response = await axios.put(
        `http://localhost:4000/posts/update/${this.$route.params.id}`,
        updatePosts
      );
      console.log(response.data);
      commit(&quot;updatePosts&quot;, response.data);
    },
  };
  
  const mutations = {
    setPosts: (state, Posts) =&gt; (state.posts = posts),
    newPosts: (state, posts) =&gt; state.posts.unshift(posts),
    removePosts: (state, id) =&gt;
      (state.posts = state.posts.filter((posts) =&gt; posts.id !== id)),
    updatePosts: (state, updTodo) =&gt; {
      const index = state.Posts.findIndex((posts) =&gt; posts.id === updPosts.id);
      if (index !== -1) {
        state.posts.splice(index, 1, updPosts);
      }
    },
  };
  
  export default {
    state,
    getters,
    actions,
    mutations,
  };
  </code></pre>
  <p>store.js</p>
  <pre><code>import Vuex from &quot;vuex&quot;;
  import Vue from &quot;vue&quot;;
  import todos from &quot;./modules/todos&quot;;
  
  //load Vuex
  
  Vue.use(Vuex)
  
  //create store
  export default new Vuex.Store({
      modules: {
          posts
      }
  })
  </code></pre>
  <p>Node project (<a href="https://github.com/maltin1234/blognode" rel="nofollow noreferrer">https://github.com/maltin1234/blognode</a>)</p>