Vue - vuex

最新推荐文章于 2023-09-11 10:56:40 发布

jnChen10

最新推荐文章于 2023-09-11 10:56:40 发布

阅读量243

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/sinat_33184880/article/details/103519343

版权

Vue Vuex 是一种状态管理模式，用于解决多个组件间共享状态的问题。核心概念包括响应式的state、getters、mutations和actions。State用于存储共享数据，通过计算属性、mapState辅助函数等方式在组件中获取。Getters允许派生状态，避免重复代码。Mutations是同步更改状态的唯一方法，通常配合载荷使用。Actions则允许执行异步操作并提交mutations。通过这些机制，Vuex使状态管理变得高效且易于维护。

摘要由CSDN通过智能技术生成

Vuex状态管理模式

当两个或两个以上的组件需要共用同一个数据源时，使用Vuex对数据的管理会变得更见简单轻松（相比localStorage、路由传参）

响应式

Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件（视图）也会相应地得到高效更新。

核心概念

state
getters
mutations
actions

state

存放共享的数据，需要提前声明

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  }
})

// main.js，注入store，每个组件都可以通过this.$store访问store
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store'

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

如何在组件中获取state中的数据?

直接调用

let count = this.$store.state.count
this.count = count

<span>{
  {count}}</span>

计算属性

// 由于Vuex的状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态
// 每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM
computed: {
  count () {
    return this.$store.state.count
  }
}

<span>{
  {count}}</span>

mapState辅助函数

// 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。
// 为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：
// 不用写那么多次this.$store.state.xxx
import { mapState } from 'vuex'

export default {
  // mapState函数传入一个对象
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    
    // 传字符串参数 'count