三、Vuex是什么？Vuex详解

news2024/11/14 16:30:22

什么是Vuex

在理解Vuex之前，首先需要理解我们为什么要使用它？它解决了什么问题？
为什么要使用它
在Vue开发中，我们常常会用到组件直接的传值、通讯。有父子通讯，兄弟组件通讯…但是传参对于多层嵌套就显得非常繁琐，代码维护也会非常麻烦。
因此我们需要一个工具，能够处理这种情况。
它解决了什么问题
Vuex就是这样一个工具，它把组件共享状态抽取出来以一个全局单例模式管理，把共享的数据函数放进vuex中，任何组件都可以进行使用。
官方的解释是：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

那我们什么时候该使用它呢？
Vuex帮助我们管理共享状态，通过共享状态可以实现不同组件之间数据的共享。但是同时引入了更多的框架和概念。
如果我们需要开发中大型单页应用，需要用到较多组件传值，需要考虑如何更好地在组件外部管理状态，我们通常考虑使用Vuex。
但是如果我们只需要开发简单的单页应用，最好不要使用 Vuex，一个简单的 store 模式就足够了。

Vue项目中，Vuex安装和配置

第一种安装方式：
在vue-cli脚手架搭建时，如果我们选择手动创建，可以手动选择安装vuex插件，成功搭建vue工程后，vuex便被自动安装了
在这里插入图片描述
通过该方式，vue-cli初始化创建时，会自动配置好，无需再进行手动配置

第二种安装方式：

如果当前项目中，没有安装Vuex，也可以通过npm进行安装

npm install vuex@next --save

配置：
在工程的src目录下，新建store文件夹->新建index.js，index.js内容如下（配置的Store对象，是vuex的核心对象，它记录了整个vue应用的数据状态以及操作数据的方式）。

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

随后在工程的入口文件main.js中引入刚刚的配置文件即可。
在这里插入图片描述

Vue的状态详解与用法

vuex中一共有五个状态 State、Getter、Mutation、Action、Module。

1.State

state提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，可以看做是Vue存储全局变量的容器。
在vuex中state中定义数据，可以在任何组件中进行调用。

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
export default new Vuex.Store({
  //公共数据源，相当于data
  state: {
    name:"小明",
    age:18,
  },
})

使用方法：
方法一：
在标签中直接使用：

<span>{{$store.state.name}}</span>
<span>{{$store.state.age}}</span>

方法二：
在vue的script下，直接使用 this.$store.state.name调用

方法三：
1.从vuex中按需导入mapstate函数：

import { mapState } from "vuex";

2.在computed中引入store数据（当前组件需要的全局数据，映射为当前组件computed属性）

computed:{
    ...mapState(["name","age"])
  },

3.页面上使用

<span>{{name}}</span>
<span>{{age}}</span>

2.Mutation

Mutation简单来说是用来修改store的数据的。这是vuex提供的唯一更改store的属性。如图，提供了一个changeAge的方法修改age
在这里插入图片描述
使用方法
方法一：
使用commit触发Mutation操作。
在Vue页面组件中：

methods:{
	setAge(){
	  this.$store.commit("changeAge",10)     //年龄改成10
	}
}

方法二
使用辅助函数进行操作，具体方法同上
在这里插入图片描述

methods: {
    ...mapMutations(["changeAge"]),
    setAge(){
      this.changeAge(10)     //年龄改成10
    }
    //setAge(){
	//   this.$store.commit("changeAge",10)     //年龄改成10
	// }
  }

3.Action

Action是和Mutation相似的，也是更改store的值，但是是异步操作方法，一般不用Mutation 异步操作，若要进行异步操作，使用Action
如图，提供了一个异步asyncChangeAge的方法修改age
在这里插入图片描述
使用方法：
方法一：

methods: {
    setAge(){
	    this.$store.dispatch("asyncChangeAge",10)     //年龄改成10
	  }
  }

方法二：
使用辅助函数

methods: {
    ...mapActions(["asyncChangeAge"]),
    setAge(){
	    this.asyncChangeAge(10)     //年龄改成10
	  }
    // setAge(){
	  //   this.$store.dispatch("asyncChangeAge",10)     //年龄改成10
	  // }
  }

4. Getter

如果说state通过计算属性获取的数据，我们要经过一定的操作（比如排序），那么在Getter中我们就可以提供这种操作。使得我们获取的state达到我们的需求。

它的本质就是对state进行过滤。

const store = new Vuex.Store({
    state:{ 
        todoList:[{ 
            id: 1,
            text: 'do something1',
            isDo: true
        },{ 
            id: 2,
            text: 'do something2',
            isDo: false
        }]
    },
    getters:{ 
        doneTodos: funciton(state){ 
            return state.todoList.map(item=>item.isDo == true)
        }
    }
})

使用方法：
this.$store.getters.doneTodos获取了过滤后的state数据

5.Modules

当遇见大型项目时，数据量大，store就会显得很臃肿，这个时候，我们要对我们的状态进行模块划分。而module就是来干这样的事情的。
Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

modules: {
    cityModules:{
      namespaced: true,
      state: {
        cityname:'china',
      },
      mutations: {
        
      },
    },
    userModules:{
      namespaced: true,
      state: {
        username:'小红',
      },
      mutations: {
        
      }
    },
  }

在这里插入图片描述
使用方法
在vue页面中调用：