当前位置：首页 > news >正文

Vuex 使用教程

news 2025/7/21 16:14:56

Vuex

各子模块的内部结构及作用

这是vuex的内部代码结构，所有的子模块都是一样的
state：存放数据状态；
action：指派 mutation ；
mutation：修改state里面的状态；
getter：侧重于对数据的再次加工；
mdules：用于模块化；Store： 仓库，是使用Vuex应用程序的核心，每一个应用仅有一个 Store。Store 是一个容器，包含应用中的大部分状态，不能直接改变 Store 中的状态，要通过提交 Mutation 的方式
State： 状态保存至 Store 中，因为 Store 是唯一的，因此状态也是唯一的，称为单一状态树。但是如果所有的状态都保存在 State 中，程序则难以维护，可以通过后续的模块来解决该问题。注意，这里的状态时响应式的
Getter： 像是 Vue 中的计算属性，对 state 中的数据进行加工，方便从一个属性派生出其他的值。它内部可以对计算的结果进行缓存，只有当依赖的状态发生改变时才会重新计算
Mutation： 状态的变化必须通过提交 Mutation 来完成 （同步）
Action： 和 Mutation 类似，不同的是 Action 可以进行异步操作，内部改变状态的时候都需要提交 Mutation
Module： 模块，由于使用单一状态树，应用的所有状态会集中到一个比较大的对象上来，当应用变得非常复杂时，Store对象就有可能变得非常臃肿。为了解决这个问题，Vuex允许我们将 Store 分割成模块每个模块拥有自己的 State 、Mutation、Action、Getter甚至是嵌套的子模块

一般使用时目录结果

src下新建store文件夹，文件夹下新建 index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({state: {},getters: {},mutations: {},actions: {},modules: {}
})
// 或者利用子模块
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({modules: {user}
})
export default store

src下新建store文件夹，文件夹下新建 modules 文件夹，下面新建子模块user.js

const user = {strict: true, // 开启严格模式后直接在组件中修改state时会报错（但数据仍然改变成功），如果不开启就不会报错namespaced: true, // 开启命名空间，防止多个模块文件之间的命名冲突state: {},mutations: {},actions: {},getters: {}
}
export default user

main.js 中引入

import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({store,render: h => h(App)
}).$mount('#app')

使用

// 主模板中使用
this.$store.state.xxx
this.$store.getters.xxx
this.$store.dispatch('LogOut')
// 子模版中使用
this.$store.state.user.xxx
this.$store.getters.xxx
this.$store.dispatch('user/LogOut', size)

实例

<template><div class="contentViews" style="text-align: left;"><el-card class="box-card">姓名: {{ crjName }} - {{ $store.state.user.crjName }}<br />年龄: {{ $store.state.user.crjAge }} - {{ crjAge }}<br />vuex 计算属性：{{ currentCrjName }}<br />token: {{ token }} - {{ $store.state.user.token }}<br />{{ avatar }}<el-button type="primary" size="small" @click.native="getMapActions">改变姓名 mapActions</el-button><el-button type="primary" size="small" @click.native="getMapMutations">改变姓名 mapMutations</el-button><el-button type="primary" size="small" @click.native="tc">退出</el-button><el-button type="primary" size="small" @click.native="tc1">退出</el-button></el-card></div>
</template><script>
// 1.引入辅助函数
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
export default {computed: {...mapState('user', ['crjName', 'crjAge']),...mapGetters('user', ['currentCrjName']),...mapState({name:'crjName', age: 'crjAge'})...mapState({avatar: a => a.user.avatar}), // 这里想要访问根模块里面的方法  需要这样写后面加上 {root:true}...mapGetters(['token']),...mapGetter({token: 'token'})...mapActions(['LogOut'])},methods: {// 2，使用...mapActions('user', ['setCrjName']),...mapMutations('user', ['commitCrjName']),// 这里想要访问根模块里面的方法  需要这样写后面加上 {root:true}...mapMutations({commitCrjName: 'commitCrjName'})getMapActions() {this.setCrjName('李四');},getMapMutations() {this.commitCrjName('马武');},tc() {this.LogOut.then(() => {location.href = '/';})},tc1() {this.$store.dispatch('FedLogOut').then(() => {location.href = '/';})},}
};
</script>

Vuex中actions的使用

actions属性是用来处理异步方法的，通过提交mutations实现。Action| Vuex API 参考 | Vuex

说明

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

特点

1.异步操作，通过mutations来改变state。

2.不能直接改变state里的数据。

3.包含多个事件回调函数的对象。

4.执行方式：通过执行 commit()来触发 mutation 的调用, 间接更新 state

5.触发方式: 组件中: $store.dispatch(‘action 名称’, data1)

6.可以包含异步代码(例如：定时器, 请求后端接口)。

使用

// 直接使用
this.$store.dispatch('actions方法名', 具体值)        // 不分模块
this.$store.dispatch('模块名/actions方法名', 具体值) // 分模块
// mapActions
import { mapActions } from 'vuex'
export default {computed: {// 不分模块...mapActions(['actions方法名'])          // 分模块，不改方法名...mapActions('模块名', ['actions方法名'])// 分模块，不改方法名...mapActions('模块名',{'新actions方法名': '旧actions方法名'})}
}

实例

<script>
import { mapActions } from 'vuex'
export default {computed: {...mapActions(['LogOut'])},methods: {fedLogOut() {this.$store.dispatch('FedLogOut').then(() => {location.href = '/';})},logout() {this.LogOut.then(() => {location.href = '/';})}}
}
</script>