vue 利用vuex存入数据和取出数据的方法

在Vue中，你可以使用Vue的状态管理模式（Vuex）来存储和获取数据。Vuex提供了一个全局的存储库，允许你在应用程序的任何组件中访问和修改数据。

首先，你需要在项目中安装Vuex：

npm install vuex --save

然后，在你的Vue项目中创建一个store文件夹，并创建一个名为store.js（或者其他你喜欢的名字）的文件。

在store.js中，你可以定义一个Vuex Store并导出它：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    data: null
  },
  mutations: {
    // 存储数据
    setData(state, payload) {
      state.data = payload
    },
    // 删除数据
    removeData(state) {
      state.data = null
    }
  },
  getters: {
    // 获取数据
    getData(state) {
      return state.data
    }
  },
  actions: {
    // 异步操作
  }
})

在这个示例中，state中定义了一个data对象，mutations中定义了两个方法：setData和removeData。 setData方法用于存储数据，接受一个payload参数，其中包含要存储的数据。removeData方法用于删除数据。

接下来，你可以在组件中使用这些方法来存储和删除数据。

<template>
  <div>
    <p>Stored Data: {{ storedData }}</p>
    <button @click="storeData">Store Data</button>
    <button @click="removeData">Remove Data</button>
  </div>
</template>
 
<script>
export default {
  computed: {
    storedData() {
      return this.$store.getters.getData
    }
  },
  methods: {
    storeData() {
      const data = { id: 1, name: '张三' }
      this.$store.commit('setData', data)
    },
    removeData() {
      this.$store.commit('removeData')
    }
  }
}
</script>

在这个示例中，点击"Store Data"按钮会调用storeData方法，该方法会将一个包含id和name属性的对象作为参数，然后调用setData方法来存储这个对象。

点击"Remove Data"按钮会调用removeData方法，该方法会调用removeData方法来删除存储的数据。

请注意，这只是一个简单的示例，你可以根据你的需求来定义和操作Vuex Store中的数据。