vuex详解_vuex讲解

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

npm install vuex --save

2. 引用Vuex

在App.vue文件中：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3. 创建仓库Store

要使用 Vuex，我们要创建一个实例 store，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理。

 //创建一个 store
 const store = new Vuex.Store({});

---

四、包含模块

• State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
• Getter：允许组件从 store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
• Mutation：是唯一更改 store 中状态的方法，而且要是同步函数。
• Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
• Module：可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。

1. State

假设我们有一个全局状态 count 的值为 5。那么，我们就可以将其定义为 state 对象中的 key 和 value，作为全局状态供我们使用。如下：

• Vue2.x中：

 //创建一个 store
 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    }
 });

• Vue3.x中：

import { createStore } from 'vuex'
export default createStore({
    state: {
		count:5  //总数：5
    }
}    

2. Getters

可以认为，getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等

假设我们要在state.count的基础上派生出一个新的状态newCount出来，就适合使用我们的 getters

getters 接受 state 作为其第一个参数

• Vue2.x中：

const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      count:5  //总数：5
   },
   getters:{
      newCount:state => state.count \* 3
   }
});

在组件中获取 {{newCount}} 方式：

export default {
  computed: {
      newCount(){
          return this.$store.getters.newCount;
      }
  }
};  

• Vue3.x中：

import { createStore } from 'vuex'
export default createStore({
    state: {
		count:5  //总数：5
    },
   getters: {
   		newCount:state => state.count \* 3
    },
}    

在组件中获取 {{newCount}} 方式：

<template>
	<span>{{ $store.getters.newCount }}</span>
</<template>

<script setup>
import { useStore } from 'vuex';
const store = useStore();
const getNewCount= () => {
 console.log(store.getters.newCount);
};
</script>

3. Mutations

Vuex 给我们提供修改仓库 store 中的状态的唯一办法就是通过提交mutation

mutation必须是同步函数，这是 Vuex 设计时的一个核心原则：

• Vuex 的状态跟踪机制依赖于同步的 mutations
• 当 mutation 异步执行时，Vuex 无法准确地知道何时状态已经更新，这可能导致无法正确地显示状态变化

在 mutations 中，可以直接修改state状态

• Vue2.x中：

 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    },
    // mutations是修改state中数据的唯一途径
    mutations:{
        increment(state，value){
            state.count += value;
        }
    }
 });

• Vue3.x中：

import { createStore } from 'vuex'
export default createStore({
    state: {
		count:5  //总数：5
    },
    mutations:{
        increment(state，value){
            state.count += value;
        }
    }
}    

通过 commit 方法被调用，通常是在组件中通过 this.$store.commit("increment", 666); 的方式触发

我们在提交commit 时候，第一个参数"increment",就是对应在 mutations 中的increment方法，第二个参数是自定义值。例如：

• Vue2.x中：

 methods: {
   getVal(event) {
     //通过commit提交一个名为increment的mutation
     this.$store.commit("increment", 666);
   }
 }

• Vue3.x中：

import { useStore } from 'vuex';

const store = useStore();
const getVal = event => {
     //通过commit提交一个名为increment的mutation
     store.commit("increment", 666);
   }

4. Action

1. Actions 是可以包含任意异步操作的函数
2. 在 actions 中，不能直接修改状态（state），而需要通过 dispatch 方法提交一个 mutation 来更改状态
3. 只有通过 action => mutations => states ，这个流程进行操作，具体步骤如下：

export default new Vuex.Store({
    //存放数据
    state: {
        obj: {},
    },
    //4. 通过commit mutations中的方法来处理
    mutations: {
        getParam(state, Object) {
            //5.修改state中的数据
            state.obj = Object
        }
    },
    //2.接受dispatch传递过来的方法和参数
    actions: {
        getParamSync(store, Object) {
            // 处理异步操作
            setTimeout(() => {
                //3.通过commit提交一个名为getParam的mutation
                //action 函数接收一个 store 的实例对象，因此你可以调用 store.commit 提交一个 mutation
                store.commit('getParam', Object);
            }, 1000)
        }
    }
})

通过 dispatch 方法被调用，通常是在组件中通过 this.$store.dispatch('getParamSync',{name,age,sex}) 的方式触发

methods: {
   getVal() {
	  let name= 'xia';
	  let age= '26';
	  let sex= 'man';
	  //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
	  this.$store.dispatch('getParamSync',{name,age,sex})
   }
}

5. Modules

随着项目的复杂度增大，为了方便管理 Vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的 state、mutation、action、getter 甚至是嵌套子模块

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import \* as getters from './getters'

import moduleA from './module/moduleA' // 模块A
import moduleB from './module/moduleB' // 模块B

Vue.use(Vuex)

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

moduleA.js / moduleB.js 文件

// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}

然后我们就在组件里这么调用就可以了

<template>
	<div class="demo">
		<h1>{{getText1}}</h1>
		<h1>{{getText2}}</h1>
	</div>
</template>

computed: {
    getText1(){
    	return this.$store.state.moduleA.text;
    },
    //或
	...mapState({
		getText2: state => state.moduleB.text;
	})
}

由此可知，模块内部的 state 是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问。

---

五、Vuex最最简单的项目实例

运用vuex语法糖mapMutations和mapGetters

1. 存储数据

a.vue 文件

import { mapMutations } from "vuex"; // 引入mapMutations
export default {
	methods: {
		...mapMutations({
		    // 将changeNews与mutations中的SET\_NEWS关联
		    changeNews: "SET\_NEWS"
		}),
		submit(){
			// 提交一个名为changeNews的mutation，并传入参数val
			let val = 'test news';
			this.changeNews(val);// 相当于this.$store.commit("changeNews", val);
		}
	}
}

2. 获取数据

b.vue 文件

import { mapGetters } from "vuex"; // 引入mapGetters 
export default {
	computed: {
        // 用vuex读取数据(读取的是getters.js中的数据)
        // 相当于this.$store.getters.news(vuex语法糖)
        ...mapGetters(["news"])
	},
	created() {
        // 获取getters中news数据
        console.log(this.news);
	}
}

3. store文件目录结构

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import \* as getters from './getters'

//每次修改state都会在控制台打印log
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE\_ENV !== 'production'

export default new Vuex.Store({
	actions,
	getters,
	state,
	mutations,
	strict: debug, // 当debug=true时开启严格模式(性能有损耗)
	plugins: debug ? [createLogger()] : []
})

state.js

const state = {
	news: {}
}

export default state;

mutations.js

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

createLogger()] : []
})

#### state.js

const state = {
news: {}
}

export default state;

#### mutations.js




**收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。**
[外链图片转存中...(img-bbN8v2Sb-1715795310505)]
[外链图片转存中...(img-nSFJwMdn-1715795310505)]

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

**需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**