VueX的安装和使用

安装和使用 Vuex 是在 Vue 项目中进行状态管理的一种常用方法。让我一步步为你解释如何在 Vue 项目中安装并使用 Vuex。

首先，确保你的 Vue 项目已经创建并正常运行。如果没有安装Vue则可以去Vue的安装及创建项目 - 掘金 (juejin.cn)

接下来，我们需要安装 Vuex。在你的项目目录下，打开终端（命令行界面）并输入以下命令：

npm install vuex --save

这将使用 npm（Node 包管理器）来安装 Vuex 并将其添加到你的项目依赖中。

安装完成后，我们需要在主入口文件（通常是 main.js）中引入 Vuex。在你的 main.js 文件中添加以下代码：

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

Vue.use(Vuex)

这里我们先引入了 Vue 和 Vuex，并使用 Vue.use() 方法注册 Vuex。

接下来，我们需要创建一个 Vuex 的实例，也就是一个 Vuex 的 Store。在你的项目中，新建一个名为store的文件夹，然后再其文件夹内新建一个名为 store.js 的文件，并添加以下代码：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 这里是你的应用程序的状态
  },
  mutations: {
    // 这里是修改状态的方法
  },
  actions: {
    // 这里是触发 mutations 的方法
  },
  getters: {
    // 这里是获取状态的方法
  }
})

在这个文件中，我们首先引入了 Vue 和 Vuex，然后使用 Vue.use() 方法注册 Vuex。接下来，我们通过 new Vuex.Store() 创建了一个 Vuex 的实例，并传入了一个对象。

在这个对象中，你可以定义你的应用程序的状态（state）、修改状态的方法（mutations）、触发 mutations 的方法（actions）以及获取状态的方法（getters）。你可以根据你的具体需求来进行定义和编写。

最后一步，我们需要将这个 Vuex 的 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')

在这里，我们通过 import store from './store' 将之前创建的 Vuex 的实例引入到了 main.js 文件中，并在创建 Vue 实例时将其传递给了 store 选项。

现在，你已经成功地在你的 Vue 项目中安装并使用了 Vuex！你可以在组件中通过 this.$store 来访问 Vuex 的状态、触发 mutations 和 actions，以及使用 getters 获取状态。

在 Vue 项目的页面中引用 Vuex 非常简单！让我向你展示如何在项目页面中引用 Vuex。

假设你已经按照之前的步骤安装和配置了 Vuex。现在，让我们来看看如何在页面中使用它。

首先，在你的组件中，你需要引入 Vuex。可以在组件的 <script> 部分使用 import 语句将 Vuex 引入进来。以下是一个示例：

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  // 组件的其他选项
  // ...
  
  computed: {
    // 使用 mapState 辅助函数将 Vuex 的 state 映射到组件的计算属性
    ...mapState(['stateProperty']),
    
    // 使用 mapGetters 辅助函数将 Vuex 的 getters 映射到组件的计算属性
    ...mapGetters(['getterProperty'])
  },
  
  methods: {
    // 使用 mapMutations 辅助函数将 Vuex 的 mutations 映射到组件的方法
    ...mapMutations(['mutationMethod']),
    
    // 使用 mapActions 辅助函数将 Vuex 的 actions 映射到组件的方法
    ...mapActions(['actionMethod'])
  }
}

在上面的示例中，我们使用了 mapState、mapGetters、mapMutations 和 mapActions 这些辅助函数来将 Vuex 的状态、getters、mutations 和 actions 映射到组件的计算属性和方法中。你可以根据需要选择使用。

在模板部分，你可以像使用其他计算属性和方法一样使用这些映射后的属性和方法。以下是一个示例：

<template>
  <div>
    <p>{{ stateProperty }}</p>
    <p>{{ getterProperty }}</p>
    <button @click="mutationMethod">触发 Mutation</button>
    <button @click="actionMethod">触发 Action</button>
  </div>
</template>

在上面的示例中，我们将映射后的 stateProperty 和 getterProperty 属性显示在模板中，并通过按钮来触发映射后的 mutationMethod 和 actionMethod 方法。

这样，你就可以在 Vue 项目的页面中使用 Vuex 了！确保你在组件中正确引入和使用了 Vuex，并根据你的需要进行状态管理、调用 mutations 和 actions。

而Vuex是基于内存，存在内存里面的，刷新网页之后就没有了，不会持久化储存，如果需要做持久化的话可以进行以下操作：

利用vuex-persistedstate插件来进行Vuex的持久化存储，在你的项目目录下，打开终端（命令行界面）并输入以下命令：

npm install vuex-persistedstate  --save

然后在store.js中引入以下代码,这里默认是存储到localStorage里面的：

import PersistedState from "vuex-persistedstate"
export default new Vuex.Store({
  // ...
  plugins: [PersistedState()]
})

这样我们做好了Vuex的持久化功能。