vueX怎么用的全部流程

最新推荐文章于 2024-09-13 23:32:49 发布

m0_72742671

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量21

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_72742671/article/details/135130825

版权

文章讲述了如何在Vue2项目中使用Vuex进行状态管理，包括如何在个人中心页面存储和修改个人信息，以及如何在其他页面获取和使用这些信息。重点介绍了state、mutations、actions和getters的使用。

摘要由CSDN通过智能技术生成

vue2登成功录的时候怎么把个人信息存在vuex里面，在个人中心可以修改个人信息，修改后的个人信息，原来的vuex怎么修改，其他的页面用的时候怎么用

1.先，安装Vuex：

npm install vuex -S

在项目目录下store文件夹，并在该文件夹下创建一个index.js文件，用于定义Vuex的store：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    personalInfo: {
      name: '',
      age: '',
      email: ''
    }
  },
  mutations: {
    updatePersonalInfo(state, payload) {
      state.personalInfo = payload
    }
  },
  actions: {
    updatePersonalInfo({ commit }, payload) {
      commit('updatePersonalInfo', payload)
    }
  },
  getters: {
    getPersonalInfo(state) {
      return state.personalInfo
    }
  }
})

export default store

在main.js中引入store，并将其挂载到Vue实例上：


// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

在个人中心页面中，可以通过计算属性获取并修改个人信息：

<template>
  <div>
    <h1>个人中心</h1>
    <form @submit.prevent="updateInfo">
      <label for="name">姓名：</label>
      <input type="text" id="name" v-model="name">
      <br>
      <label for="age">年龄：</label>
      <input type="text" id="age" v-model="age">
      <br>
      <label for="email">邮箱：</label>
      <input type="text" id="email" v-model="email">
      <br>
      <button type="submit">保存</button>
    </form>
  </div>
</template>

<script>
export default {
  computed: {
    name: {
      get() {
        return this.$store.getters.getPersonalInfo.name
      },
      set(value) {
        this.$store.dispatch('updatePersonalInfo', { ...this.$store.getters.getPersonalInfo, name: value })
      }
    },
    age: {
      get() {
        return this.$store.getters.getPersonalInfo.age
      },
      set(value) {
        this.$store.dispatch('updatePersonalInfo', { ...this.$store.getters.getPersonalInfo, age: value })
      }
    },
    email: {
      get() {
        return this.$store.getters.getPersonalInfo.email
      },
      set(value) {
        this.$store.dispatch('updatePersonalInfo', { ...this.$store.getters.getPersonalInfo, email: value })
      }
    }
  },
  methods: {
    updateInfo() {
      // 提交表单时，会自动触发计算属性的set方法，将修改后的个人信息保存到Vuex中
    }
  }
}
</script>

在其他页面中，可以通过计算属性获取个人信息并使用：

<template>
  <div>
    <h1>其他页面</h1>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <p>邮箱：{{ email }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    name() {
      return this.$store.getters.getPersonalInfo.name
    },
    age() {
      return this.$store.getters.getPersonalInfo.age
    },
    email() {
      return this.$store.getters.getPersonalInfo.email
    }
  }
}
</script>