Vuex 深知简用

最新推荐文章于 2024-11-05 15:28:12 发布

庭前云落

最新推荐文章于 2024-11-05 15:28:12 发布

阅读量99

点赞数

分类专栏：前端 --- Vue 文章标签： python java vue 数据库大数据

本文链接：https://blog.csdn.net/remsqks/article/details/108586058

版权

前端 --- Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vuex

官网

安装

引入

1、Vuex 是什么?

Vuex是一个专为Vue.js应用开发的状态管理模式。它采用集中式储存管理所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单来说，用于维护组件之间的数据

什么是状态管理模式

包含以下几个部分

state，驱动应用的数据源;
view，以声明方式将state映射到视图;
actions，响应在view上的用户输入导致的状态变化。

根据官网总结：就是把组件的共享状态抽取出来，以一个全局单例模式管理，不论在哪个位置， 任何组件都能获取状态或者触发行为！

好处就是通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性， 我们的代码将会变得更架构化且易维护

1.1、在什么情况下我们使用Vuex？

举个栗子：不同的组件，都需要用户信息以及一些其它的公共数据，每个组件都发一遍请求浪费，不请求组件之间参数传来传去，麻烦不说，容易出错。Vuex就帮你解决这个问题。

Vuex是为开发大型单页应用(SPA)准备的，如果需要构建一个中大型单页应用，需要考虑如何在组件外管理状态，Vuex是不二之选。

总结： Vuex可以帮助我们管理共享状态，并附带了更多的概念和框架。

2、vuex 组成

vue脚手架自动创建内容

export default new Vuex.Store({
  state: {
  //vuex状态，也就是数据。（不允许直接修改，只能读）    
  },
  mutations: {
  //修改，用于修改数据。    
  },
  actions: {
  //action，用于操作mutations，运行发送ajax    
  },
  modules: {
  }
})

2.1、State

Vuex 使用单一状态树——用一个对象就包含了全部的应用层级状态。它作为唯一数据源而存在。每个应用将仅仅包含一个store实例。

单一状态树让我们能够直接地定位任一特定的状态片段。

个人理解：就相当于vue中data属性

使用

1. 如何声明变量，用于储存数据
1. 如何在其他组件中，使用vuex的数据

如何声明变量，用于储存数据

在store/index.js 文件的state区域声明变量

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {    //状态，用于存放数据，类似data区域
    count: 0 
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

如何在其他组件中，使用vuex的数据

this.$store 表示操作vuex
this.$store.state 表示操作vuex的state区域

<script>
export default {
  created() {
    //获得vuex中的数据
    console.info( this.$store.state.count )
  },
}
</script>

2.2、Mutation

更改Vuex的store中的状态唯一方法是提交mutation。 Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和一个 回调函数 (handler)。

这个回调函数就是我们实际进行状态更改的地方，接收state作为第一个参数。

使用

1. 如何在mutaions 定义函数，修改state的值
1. 如何在其他组件中，执行mutations定义的函数

如何在mutations定义函数，修改state的值

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)

export default new Vuex.Store({
  state: {    //状态，用于存放数据，类似data区域
    count: 0 
  },
  mutations: {
    //声明 updateCount函数，修改count的值
    updateCount(state, value) {
      state.count = value
    }
  },
  actions: {
  },
  modules: {
  }
})

如何在其他组件中，执行mutaions定义的函数

this.$store 对vuex操作
this.$store.commit() 触发mutations定义函数

this.$store.commit("函数名"，传递的值)

<script>
export default {
  created() {
    //获得vuex中的数据
    console.info( this.$store.state.count )

    //修改vuex中的数据，通过mutations
    this.$store.commit('updateCount', 100)

  },
}
</script>

2.3、Action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

使用

如何在actions 定义函数

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)

export default new Vuex.Store({
  state: {    //状态，用于存放数据，类似data区域
    count: 0 
  },
  mutations: {
    //声明 updateCount函数，修改count的值
    updateCount(state, value) {
      state.count = value
    }
  },
  actions: {
     increment (context) {
      context.commit('increment')
    },
   //执行异步操作
    incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  },
  //async/await
   async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }    
}
  modules: {
  }
})

如何在其他组件中，执行actions定义的函数

在组件中使用this.$store.dispatch('xxx')分发action
使用mapActions辅助函数将组件的methods映射为store.dispatch

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}