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

Posted 2023-02-22

【中文标题】我需要在短时间内学习 vuex，因为我不知道如何将我的 vue js 迁移到 vuex？

【英文标题】：I need to learn vuex in short time because and i cant figure out how to migrate my vue js to vuex?

【发布时间】：2021-02-19 16:56:59

【问题描述】：

这是我的 github 页面，你可以在帮助分支中看到我做了什么：https://github.com/maltin1234/blog

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

创建组件.vue

    <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: "CreateComponent",
  data() 
    return 
      title: "",
    ;
  ,
  methods: 
    ...mapActions(["addPost"]),
    onSubmit(e) 
      e.preventDefault();
      this.addPost(this.title);
    ,
  ,
;
</script>

---

我有一个节点 js 后端，我希望我的 vuex 获取这些端点。 node js 后端由一个 mongodb 连接和一个带有文章的模型组成。这是我对 vuex 的尝试。

post.js（vue.js 项目）

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("",  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, updTodo) => 
    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,
;

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
    
)

节点项目 (https://github.com/maltin1234/blognode)

【问题讨论】：

你怎么打电话给fetchPostsaddPostsdeletePostsfilterPosts和updatePosts？你在哪里创建一个 Vuex 商店？在您的代码中绝对没有提到Vuex - 除了从未使用过的mapActions

@JaromandaX 我在这个存储库中有第二个分支。它被称为帮助。 Index.js 将是商店。我从这个 repo 中获得灵感：github.com/bertamatu/vuex-todo-app。我不知道如何处理这些组件。

你误会了......我指的是问题中的代码......不是一些无关紧要的github内容 - 或者一旦你改变它就会是

@JaromandaX 我在这里更新了代码

【参考方案1】：

我把名字从 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,
  ,
);

然后我不确定你到底是什么意思 dima 但我将我的 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>

这是我的 post.js，它向我的后端发出请求 // 这里应该添加：state、getter、actions、mutations

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

【参考方案2】：

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

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

然后你可以通过this标识符获取它们 只需查看 Vuex API Reference，非常简单

【讨论】：

你能看看我的回答，告诉我你的意思是否正确？