Vuex

是什么

复杂场景组件之间通信

vuex是vue的一个状态管理工具,状态就是数据

大白话: vuex是一个插件,可以帮助我们管理 <code>vue通用数据(多组件数据共享)

场景

某个状态在多个组件使用(个人信息)多个组件 共同维护 一份数据(购物车)

优势

数据集中化管理响应式

vuex遵循单向数据流

初始配置

安装 vuex

npm install vuex@next --save # 对于 Vue 3npm install vuex --save # 对于 Vue2

新建vue模块

新建store/index.js文件 专门存放 Vuex

创建仓库

// store/index.js

// 导入 Vuex，它是 Vuex 状态管理库的核心

import Vuex from 'vuex';

// 创建一个新的 Vuex.Store 实例

// 这个实例将作为全局状态管理器

export default new Vuex.Store({

// 定义应用的状态（state）

state: {

// 一个名为 count 的状态，初始值为 0

count: 0

},

// 定义更改状态的方法（mutations）

mutations: {

// increment 方法用于更新 count 状态

// state 是 Vuex state 对象，v 是传递给 mutation 的参数

increment(state, v) {

// 将 count 状态更新为传入的参数 v

state.count = v;

}

},

// 定义异步提交状态更改的方法（actions）

actions: {

// increment 方法用于异步提交 increment mutation

increment({ commit }) {

// 调用之前定义的 increment mutation

commit('increment',10);

}

},

// 定义从状态派生的状态（getters）

getters: {

// doubleCount 方法返回 count 的两倍

// state 是 Vuex state 对象

doubleCount(state) {

// 返回 count 状态的两倍

return state.count * 2;

}

}

});

挂载main.js

// main.js

import Vue from 'vue';

import App from './App.vue';

import store from './store/index';

// 使用 Vuex 插件

Vue.use(Vuex);

new Vue({

store,

render: h => h(App)

}).$mount('#app');

配置项

new Vuex.Store({配置项})

配置项	类型	描述
<code>state	Object	根状态对象，包含所有的状态数据
<code>getters	Object	根getter函数，允许从state派生出一些状态
<code>mutations	Object	同步函数，用于变更state中的状态数据在 ;Vue 3 中，<code>mutations 应改为 actions 和 commit，因为 Vue 3 的 Vuex 4 中不再使用 mutations。
<code>actions	Object	异步操作或复杂逻辑的提交（调用mutation）的包裹函数
<code>modules	Object	命名空间模块对象，用于将store分割成模块
<code>plugins	Array	自定义插件数组，用于进一步处理 actions
<code>strict	Boolean	是否开启严格模式，开启后在mutation之外修改state将抛出错误
<code>devtools	Boolean / Object	是否启用 Vue Devtools 支持，可以传递选项对象

state

根状态对象，包含所有的状态数据

核心配置项(必要的)

获取数据

通过<code>this.$store.属性名通过 import 导入 store 然后使用

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex); // 使用 Vuex 插件

const store = new Vuex.Store({ -- -->

state: {

count: 1

},

});

getters

根getter函数，允许从state派生出一些状态对数据进一步,派生状态使用

$store.getters.filterList()

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex); // 使用 Vuex 插件

const store = new Vuex.Store({

state: {

list: [1,2,3,4,5,6,7,8,9]

},

getters:{

//过滤 <= 5 的数据

filterList(state){

return state.list.filter(item=> item > 5)

}

}

});

mutations/actions

用于变更state中的状态数据

actions:异步操作或复杂逻辑的提交（调用mutation）的包裹函数

Mutations：通常使用全小写字母，并且可以使用下划线来分隔单词，例如 update_count。

第一个参数是state也就是状态 ,通过state 来调用数据

Actions：可以使用驼峰命名法，并且通常在名称中包含动词，以表明它们执行的操作，例如 updateCount。

第一个参数是context 是上下文,和 state相似

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex); // 使用 Vuex 插件

const store = new Vuex.Store({

state: {

count: 10

},

actions: {

async updateCount({ commit }, n) {

commit('update_count', n);

},

async updateCount2(context, n) {

context.commit('update_count', n);

}

},

mutations: {

//可以同名,但是不推荐

update_count(state, n) {

state.count = n;

}

}

});

export default store;

modules

分模块

Vue 使用单一状态树,当项目比较大时,状态会集中,从而导致项目臃肿将vuex配置文件导入 根配置下的 modules 就可以了

导入模块

// store/modules/user.js

const state = { ... };

const mutations = { ... };

const actions = { ... };

const getters = { ... };

export default {

state,

mutations,

actions,

getters

};

// store/index.js 根模块

import Vuex from 'vuex';

import user from './modules/user';

const store = new Vuex.Store({

modules: {

user

}

});

export default store;

使用

子模块state

$store.state.模块名.属性名mapState映射:

mapState('模块名',['属性名']);

this.属性名 就可以访问数据了

子模块getters

$store.getters['模块名/属性名称']mapGetters映射:

mapGeters(‘模块名’,[‘属性名’,‘属性2’])

this.属性名 就可以获得数据模块名/属性名称:是因为命名是时候就是这命名的

子模块mutations

$store.commit['模块名/属性名称']mapMutations映射:

mapMutations(‘模块名’,[‘函数名’,‘函数2’])

this.函数名() 就可以调用函数了模块名/属性名称:是因为命名是时候就是这命名的

子模块actions

$store.dispatch['模块名/属性名称']

mapActions映射:

mapActions(‘模块名’,[‘函数名’,‘函数名2’])

this.函数名() 就可以调用函数了

模块名/属性名称:是因为命名是时候就是这命名的

数据的更改

this.$emit() 是 Vue 组件中用来触发自定义事件的方法。当调用 this.$emit('eventName', param) 时，它会向父组件发出一个事件，父组件可以监听这个事件并做出响应。同步:

而在 Vuex 中，this.$store.commit('mutationName', param) 用于触发状态变更。这里的 commit 方法用于调用 store 中定义的 mutations，mutations 是同步函数，用于更改 store 中的状态（state）。 异步:

this.$store.dispatch('actionName', payload) 来分发 actions。这会告诉 Vuex 执行相应的 action 函数。

辅助函数

mapState

将store中的数据,自动映射到 组件的 计算属性中可以直接this.属性名 来访问数据

//引入mapState

import { mapState } from 'vuex';

//使用

export default {

computed: {

// 使用对象展开运算符将所有映射的状态转为计算属性

...mapState([

// 映射 this.count 为 store.state.count

'count'

]),

// 映射 this.doubleCount 为 store.getters.doubleCount

...mapState({

'doubleCount': state => state.count * 2

})

}

}

//-------------------

computed:{ ...mapState['状态名'] }

//# 等价

computed:{ '状态名'(){

return this.$store.state.count

}}

mapMutatuons

将mutations同步函数 中的方法,映射到 methods中可以直接this.函数名(n) 来调用函数

//引入 mapMutatuons

import { mapMutatuons} from 'vuex'

//使用

export default {

methods: {

...mapMutations([

'update_count' // 直接使用 mutation 名称

]),

...mapMutations({

'set_count': 'update_count' // 为 mutation 提供一个别名

}),

increment() {

this.update_count(1); // 调用 Vuex store 的 mutation

},

decrement() {

this.set_count(-1); // 使用别名调用 mutation

}

}

}

//---------------------------------

methods:{

...mapMutations(['方法名'])

}

//等价

methods:{

'方法名'(参数){

this.$store.commit('方法名',参数)

}

}

mapActions

将actions异步操作中的方法,映射到 methods中可以直接this.函数名(n) 来调用函数

//导入mapActions

import { mapActions } from 'vuex';

//使用

export default {

methods: {

...mapActions([

'UpdateCount' // 将 `this.update_count` 映射为 `this.$store.update_count('actionName',obj)`

]),

...mapActions({

'mappedActionName': 'UpdateCount' // 将 `this.mappedActionName` 映射为 `this.$store.dispatch('update_count')`

}),

}

}

//--------------------

methods:{

..,mapActions([方法名])

}

# 等价

methods:{

'方法名'(参数){

this.$store.dispatch('方法名',参数)

}

}

mapGetters

将getters中的函数 中的方法,映射到 computed中可以直接this.函数名(n) 来调用函数

示例

<template>

</template>

<script>

import {mapState,mapMutations,MapActions,MapGetters} form 'vuex'

export default{

name:'test',

computed:{

...mapState(['count']),

...maoGetters(['filterList'])

},

methods:{

...mapMutations('updata_count'),

...MapActions('UpdataCount')

}

}

</script>