Vue如何实现利用vuex永久储存数据

Vue是一款前端框架，通过数据驱动方式来实现组件化开发，而Vuex则是Vue的一个状态管理工具，它提供了集中式存储管理应用的所有组件的数据，并保证状态改变是可预测的。在Vue中，我们可以利用Vuex实现永久储存数据。下面就具体介绍一下如何实现。

1. 安装Vuex

在使用Vuex之前，我们需要确保安装了Vuex。可以通过以下命令安装：

npm install vuex --save

2. 创建存储数据的state

在Vue中，state用于存储数据。我们可以在Vuex的store中创建一个state对象，在其中定义需要存储的数据。例如，我们在store.js文件中创建一个名为user的state：

const store = new Vuex.Store({
  state: {
    user: {
      name: 'John Doe',
      email: '[e-mail]'
    }
  }
});

这个state中存储了一个名为user的对象，其中包含了name和email两个属性，对应值分别为'John Doe'和'[e-mail]'。

3. 在组件中获取state数据

在Vue中，我们可以通过this.$store.state来获取store中的state数据。例如，在组件中获取store中的user数据，可以这样做：

<template>
  <div>
    <p>姓名: {{ user.name }}</p>
    <p>邮箱: {{ user.email }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    user() {
      return this.$store.state.user;
    }
  }
}
</script>

该组件中，利用Vue的计算属性computed获取了store中的user数据，并以文本形式展示出来。

4. 在组件中修改state数据

在Vuex中，在组件中修改state数据需要使用mutations。我们可以在store.js文件中创建一个mutations对象，在其中定义修改state的方法。例如，我们想要修改user的name属性：

const store = new Vuex.Store({
  state: {
    user: {
      name: 'John Doe',
      email: '[e-mail]'
    }
  },
  mutations: {
    setUser(state, name) {
      state.user.name = name;
    }
  }
});

在这里，我们定义了一个名为setUser的mutation，该mutation接收一个state和一个name参数。在setUser方法中，我们通过state.user.name = name来修改store中user的name属性。

在组件中调用这个mutation，需要使用commit方法。例如，我们在组件中创建一个输入框input，当输入框值发生变化时，触发一个名为updateName的方法：

<template>
  <div>
    <input type="text" v-model="name" @change="updateName">
    <p>姓名: {{ user.name }}</p>
    <p>邮箱: {{ user.email }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    user() {
      return this.$store.state.user;
    }
  },
  methods: {
    updateName() {
      this.$store.commit('setUser', this.name);
    }
  },
  data() {
    return {
      name: ''
    }
  }
}
</script>

在组件中，我们创建了一个名为name的data属性，用于存储输入框中的值。当输入框值发生变化时，我们触发updateName方法，使用commit方法调用store中的setUser方法，将输入框中的值传入到setUser方法的第二个参数。

这样，当我们在输入框中输入新的姓名，自动更新到视图中并且保存在了store中，下次打开网站时，仍可看到更新后的姓名。

以上就是利用Vuex实现永久储存数据的攻略，希望可以帮助到您！