本文主要是介绍VUE：Vuex--状态管理模式(store/state/Getter/Action/Mutation/Module)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Vuex 是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
Vuex的核心
-
state： Vue 组件中展示状态
-
Getter：Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
-
Action：在组件中使用 this.$store.dispatch(‘xxx’) 分发 action
-
Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
-
Module：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
代码演示：
-
state.js
isLoading: false, -
mutation.js
SET_LOGIN (state, platform) {state.isLogin = platform;}, -
Action.js
setLogin ({commit}, platform) {commit('SET_LOGIN', platform);}, -
Gettter.js
getLogin: (state) => state.isLogin, -
xx.vue
<script>import Backbar from './small_components/Back_bar';import { mapGetters } from 'vuex';import {getUserInfo} from 'src/service/getData'export default {name: 'login',data () {return {uname: '',pwd: '',loginData:{}};},mounted () {if (this.getLogin) {this.$router.replace('/myzone');}},computed: {...mapGetters(['getLogin','getuname','getpwd','getAdminPhone'])},methods: {async cheack_n_p () {if (this.uname === '' || this.pwd === '') {alert('用户名或密码不能为空');return;}var adminPhone = this.getAdminPhone;alert(adminPhone)this.loginData = await getUserInfo(this.uname,this.pwd);console.log(this.loginData.res);if(this.loginData.res!==0){this.$store.dispatch('setLogin', true);this.$store.dispatch('setAccount',this.loginData.obj.id );this.$store.dispatch('setPwd',this.loginData.obj.userType );this.$store.dispatch('setLogin', true);// this.$router.go(-1);this.$router.replace('/');}else{alert('用户名或密码错误');}}},components: {'Backbar': Backbar}};</script>
这篇关于VUE：Vuex--状态管理模式(store/state/Getter/Action/Mutation/Module)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
