Javascript 我需要在短时间内学习vuex，因为我不知道如何将我的vue js迁移到vuex？

这是我的github页面，您可以看到我在帮助分支中所做的工作：

我需要更改组件中的代码，但我不知道如何更改

CreateComponent.vue store.js

import Vuex from "vuex";
import Vue from "vue";
import todos from "./modules/todos";

//load Vuex

Vue.use(Vuex)

//create store
export default new Vuex.Store({
    modules: {
        posts
    }
})

---

节点项目（）

首先要使用Vuex，您必须创建存储并将其添加到项目中，然后要使用任何操作/状态/getter/setter，您必须通过Vuex方法将它们导入组件中，例如：

import { mapActions, mapState } from 'vuex'
export default {
    computed: {
        ...mapState('yourModule', ['stateValueOne', 'stateValueTwo'])
    },
    methods: {
        ...mapAction('yourModule', ['actionOne', 'actionTwo'])
    }
}

然后您可以通过

这个
标识符来获取它们
只需查看Vuex API参考，它非常简单
我将名称从index.js更改为store.js

store.js
import Vuex from "vuex";
import Vue from "vue";
import store from "./post";

//load Vuex
Vue.use(Vuex);

//create store
export default new Vuex.Store({
  modules: {
    posts,
  },
});

然后我不确定你到底是什么意思，但是我把我的CreateComponent改成了这段代码

CreateComponent.js

<template>
  <div>
    <h1>Create A Post</h1>
    <form @submit.prevent="addPost">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Post Title:</label>
            <input type="text" class="form-control" v-model="post.title" />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Post Body:</label>
            <textarea
              class="form-control"
              v-model="post.body"
              rows="5"
            ></textarea>
          </div>
        </div>
      </div>
      <br />
      <div class="form-group">
        <button class="btn btn-primary">Create</button>
      </div>
    </form>
  </div>
</template>
export default {

<script>
export default {
  name: "AddPost",
  data() {
    return {
      title: "",
    };
  },
  methods: {
    ...mapActions(["addPost"]),
    onSubmit(e) {
      e.preventDefault();
      this.addPosts(this.title);
    },
  },
};
</script>

如何调用
fetchPosts
addPosts
deletePosts
filterPosts
和
updatePosts
？您在哪里创建Vuex商店？在您的代码中绝对没有对
Vuex
的引用-除了
mapActions
之外，这永远不会发生used@JaromandaX我在这个存储库中有第二个分支。这叫做帮助。Index.js将是存储。我从这份回购协议中得到了灵感：。我不知道如何处理这些部件。你误解了。。。我指的是问题中的代码。。。不是一些无关紧要的github内容，或者一旦你改变了，这些内容就会被删除it@JaromandaX我更新了这里的代码你能看一下我的答案并告诉我你的意思是否正确吗？
store.js
import Vuex from "vuex";
import Vue from "vue";
import store from "./post";

//load Vuex
Vue.use(Vuex);

//create store
export default new Vuex.Store({
  modules: {
    posts,
  },
});

<template>
  <div>
    <h1>Create A Post</h1>
    <form @submit.prevent="addPost">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Post Title:</label>
            <input type="text" class="form-control" v-model="post.title" />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Post Body:</label>
            <textarea
              class="form-control"
              v-model="post.body"
              rows="5"
            ></textarea>
          </div>
        </div>
      </div>
      <br />
      <div class="form-group">
        <button class="btn btn-primary">Create</button>
      </div>
    </form>
  </div>
</template>
export default {

<script>
export default {
  name: "AddPost",
  data() {
    return {
      title: "",
    };
  },
  methods: {
    ...mapActions(["addPost"]),
    onSubmit(e) {
      e.preventDefault();
      this.addPosts(this.title);
    },
  },
};
</script>

import axios from "axios";

const state = {
  posts: [],
};

const getters = {
  allPosts: (state) => 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("http://localhost:4000/posts");
    commit("setPosts", response.data);
  },
  async addPosts({ commit }, title) {
    const response = await axios.post("http://localhost:4000/posts/add", {
      title,
      completed: false,
    });
    commit("newPost", response.data);
  },
  async deletePosts({ commit }, id) {
    await axios.delete(`http://localhost:4000/posts/delete/${id}`);
    commit("removePosts", 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("setPosts", 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("updatePosts", response.data);
  },
};

const mutations = {
  setPosts: (state, posts) => (state.posts = posts),
  newPosts: (state, posts) => state.posts.unshift(posts),
  removePosts: (state, id) =>
    (state.posts = state.posts.filter((posts) => posts.id !== id)),
  updatePosts: (state, updPosts) => {
    const index = state.Posts.findIndex((posts) => posts.id === updPosts.id);
    if (index !== -1) {
      state.posts.splice(index, 1, updPosts);
    }
  },
};

export default {
  state,
  getters,
  actions,
  mutations,
};

//this is a boilerplate for vuex module