Vuex学习笔记

最新推荐文章于 2024-07-19 21:03:03 发布

沈姐姐~

最新推荐文章于 2024-07-19 21:03:03 发布

阅读量280

点赞数

分类专栏： vue 文章标签：学习 npm vue.js

本文链接：https://blog.csdn.net/weixin_44277207/article/details/126025845

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

vuex是什么？

专门在Vue中实现集中式状态（数据）管理的一个Vue插件，也是组件间通信的方式，对vue应用中多个组件的共享状态进行集中式管理（读、写），也是组件间通信的方式，且适用于任意组件通信

什么时候使用vuex?

1.多个组件依赖于同一状态

2.来组不同组件的行为需要变更同一状态

1.安装Vuex插件

注意：vue2中，要使用vuex的3版本

vue3中，要使用vuex的4版本

npm i vuex@3

2.创建Vuex中最为核心的store

// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
import Vuex from 'vuex'
// 使用Vuex插件
Vue.use(Vuex)

// actions 用于响应组件中的动作
const actions = {}
// mutations 用于操作数据(sate)
const mutations = {}
//  state 用于存储数据
const state = {}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state

})

3.在main.js 文件中挂载使用

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'
// 关闭Vue生成提示
Vue.config.productionTip = false
// 使用插件
Vue.use(Vuex)

new Vue({
  render: h => h(App),
  store,
  beforeCreate(){
    Vue.prototype.$bus = this  //安装全局事件总线
  }
}).$mount('#app')

4.基本使用

（1）初始化数据、配置actions、配置mutations、操作文件store.js

import Vue from 'vue'
import Vuex from 'vuex'
// 使用Vuex插件
Vue.use(Vuex)

// actions 用于响应组件中的动作
const actions = {
    jiaOdd(context,value){
        if(context.state.SumNum % 2){
            context.commit('JIA',value)
        }
    }
    
}
// mutations 用于操作数据(sate)
const mutations = {
    JIA(state,value){
        console.log(state,value)
        state.SumNum += value
    },
   
}
//  初始化数据
const state = {
    SumNum:0
}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state

})

（2）组件中读取vuex中的数据：

$store.state.SumNum

（3）组件中修改vuex中的数据：

this.$store.dispatch('action中的方法名',数据)
或
this.$store.commit('mutations中的方法名',数据)

5.getters的使用

（1）概念：当state中的数据需要经过加工后再使用时，可以使用getters加工（与vue中的computed属性功能类似）

（2）在store.js中追加getters配置

....
const getters = {
    bigSum(){
        return state.SumNum *10
    }
}
// 创建并暴露store
export default new Vuex.Store({
   ......
    getters

})

（3）组件中读取数据

$store.getters.bigSum

6.四个map方法的使用

引入：

import { mapState ,mapGetters,mapActions,mapMutations} from 'vuex'

（1）mapState方法：用于帮助我们映射state中的数据为计算属性

computed：{
// 借助mapState生成计算属性，从state中读取数据
// 对象写法
...mapState({SumNum:'SumNum',school:'school',subject:'subject'}),
// 数组写法
...mapState(['SumNum','school','subject']),
}

（2）mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed：{
// 借助mapGetters生成计算属性，从state中读取数据
// 对象写法
...mapGetters({bigSum:'bigSum'}),
//数组写法
...mapGetters(['bigSum']),
}

（3）mapMutations方法：用于帮助我们生成与mutations对话的方法，即包含$store.commit(xxx)的函数

 methods:{
  // 借助mapMutations生成对应的方法，方法中会调用dispatch去联系mutations(对象写法)
      ...mapMutations({increment:'JIA',decrement:'JIAN'}),
}

（4）mapActions方法：用于帮助我们生成与actions对话的方法，即包含：$store.dispatch(xxx)的函数

 methods:{
   // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
      ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
}

7.模块化+空间命名

（1）目的：让代码更好维护，让多种数据分类更明确

（2）修改store.js

import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'
// 使用Vuex插件
Vue.use(Vuex)

// 求和相关配置
const countOptions = {
    namespaced:true,  //开启命名空间
    actions:{.....},
    mutations:{....},
    state:{.....},
    getters:{....}
}

//人员管理相关配置
const personOptions = {
    namespaced:true,  //开启命名空间
    actions:{.....},
    mutations:{....},
    state:{.....},
    getters:{....}
}
// 创建并暴露store
export default new Vuex.Store({
   modules:{
      countAbout
      personAbout
   }

})

（3）开启命名空间后

组件中读取state数据

方式一：自己直接读取

this.$store.state.personAbout.personList

方式二：借助mapGetters读取

...mapState('personAbout',['personList'])

组件中读取getters数据

方式一：自己直接读取

this.$store.getters('personAbout/firstPersonName)

方式二：借助mapGetters读取

 ...mapGetters('countAbout',{incrementOdd:'jiaOdd'})

组件中调用dispatch

方式一：自己直接读取

this.$store.dispatch('personAbout/addPersonWang',personObj)

方式二：借助mapActions读取

 ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

组件中调用commit

方式一：自己直接读取

 this.$store.commit('personAbout/ADD_PERSON',personObj)

方式二：借助mapMutations读取

  ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})