vuex的原理和使用方法

简介

Vuex 是 Vue.js 应用的状态管理模式,它为应用内的所有组件提供集中式的状态(数据)管理。可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。

Vuex的构成

  • state: state 是 Vuex 的数据中心,也就是说state是用来存储数据的。

  • **getters:**state 对象读取方法。Vue Components 通过该方法读取全局 state 对象。

  • mutations: 状态改变操作方法。 是 Vuex 修改 state 的唯一推荐方法,其他修改方式在严格模式下将会报错。 该方法只能进行同步操作 , 且方法名只能全局唯一。 操作之中会有一些 hook 暴露出来, 以进行state 的监控等。

  • actions: 操作行为处理模块。 负责处理 Vue Components 接收到的所有交互行为。 包含同步/异步操作, 支持多个同名方法, 按照注册的顺序依次触发。 向后台 API 请求的操作就在这个模块中进行, 包括触发其他 action 以及提交 mutation 的操作。 该模块提供了 Promise的封装, 以支持 action 的链式触发。

  • modules: 将 Store 分割成模块,每个模块拥有自己的 State、Getters、Mutations Actions。

Vuex的使用

1、安装 Vuex:npm install vuex

2、创建store示例

store对象

复制代码
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

在 Vue 根实例中注册store

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

在组件中使用 Store

复制代码
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
};

使用Vuex内容扩展

在真正开发中使用vuex时会有好多细节知识和注意事项,下面我们扩展一下,仅供参看

Vue 组件中获得 Vuex 状态(State)

方式一this.$store.state获取

通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到

复制代码
computed: {
    count () {
        return this.$store.state.count
    }
}

方式二mapState 辅助函数获取(推荐)

当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性

复制代码
<template>
    <div>{{count}}</div>
</template>
<script>
import { mapState }from 'vuex
export default{
    computed:{
        ...mapstate(['count'])
    }
}
</script>

Getter的定义和获取方式

定义getters:

需要显示所有大于5的数据,正常的方式,是需要list在组件中进行再一步的处理,但是getters可以帮助我们实现它

【下面getters引用的state中的数据:list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]】

复制代码
getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
    filterList:  state =>  state.list.filter(item => item > 5)
}

获取getters:

方式一: 通过属性访问

复制代码
this.$store.getters.filterList

**方式二:辅助函数 - mapGetters

复制代码
<template>
    <div>{{filterList}}</div>
</template>
<script>
import { mapGetters }from 'vuex
export default{
    computed:{
        ...mapGetters(['filterList'])
    }
}
</script>
相关推荐
Struggler2819 分钟前
Chrome插件开发
前端
apihz16 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip
前端 贾公子21 分钟前
Monorepo + vite 怎么热更新
前端
coding随想30 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
爱吃烤鸡翅的酸菜鱼1 小时前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf