什么是Vuex：

最新推荐文章于 2024-04-12 10:45:03 发布

laughable045

最新推荐文章于 2024-04-12 10:45:03 发布

阅读量320

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/weixin_55633731/article/details/117532841

版权

组件关系和通信方案：

1.	父子关系	父传子：props 子传父：$emit
2.	非父子关系	eventBus: $on; $emit
*3.	非父子关系	Vuex

什么是vuex:

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

对于使用Vuex的理解是什么？

由于Vue是单向数据流，子组件内部不能直接修改从父级传递过来的数据，子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话，可以借助子组件 A 向父组件传值，父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。

但是这样会有一个问题，就是如果子组件 A 的父组件上面还有一层爷爷组件，或者还有更多祖父类型的层级，那么会很麻烦。

因此，我们会想到能不能我们将一个共有的数据存在一个特定的地方，用的时候自己去拿，这样就不需要一层层传值，于是 Vuex 就应运而生了。

Vuex5个核心概念：

1.	state	统一定义公共数据
2.	mutations	修改数据
3.	getters	可以认为是 store 的计算属性
4.	actions	异步请求
5.	modules	分割成模块

state使用：

1.定义公共数据：  


new Vue.store({
 
 state: {
    // 属性名： 属性值
    obj: '' ,
    arr: ['']
  }
});

})

就是在state属性中以键值对的形式声明这个SPA中所有的状态。上面的代码中声明了一个count状态

读取状态当然也是直接读取这个属性里面的各种子属性了。

2.1组件中使用：
this.$store.state.obj

2.2模板中使用：
{{$store.state.arr[0]}}

mutations使用：

1.定义：
他的第一个参数是state，第二个参数是载荷

例：
new Vue.store({
 
  mutations：{
  	mutation名1：function(state [, 载荷]) {
  
    },
    mutation名2：function(state [, 载荷]) {
  
    },
	}
})

2.调用：
在调用时候用 this.$store.commit('mutation名'， 载荷) 来调用

例：
export default {

mutations:{
this.$store.commit('mutation名1',参数)
}

}

vuex维护公共数据，有两个步：

定义数据:
提供获取/修改数据的方法

getters使用：

一般使用getters来获取我们的state，因为它算是state的一个计算属性

1.定义：

new Vuex.store({
  
  getters: {
    getter的名字1: function(state) {
      return 要返回的值
    }
  }

})

2.调用：

在组件中通过：$store.getters.getter的名字1

actions的使用：

定义格式：
new Vuex.store({

  action的名字:funcyion(context) {
1. 发异步请求, 请求数据
   axios({

    method: 'GET' / 'POST'
    url:'https://www.xxx.com',        
      }).then(res => {
 2.保存数据       
        context.commit('定义的mutation',载荷)
      })
})

调用格式：
this.$store.dispatch('actions的名字')

action一般用来发异步请求，数据回来之后，在去调用mutations来保存数据

modules来拆分复杂业务：

模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理

/ 定义的模块A
const moduleA = {
  namespaced: true,
 这个为true，则在使用mutations时，就必须要加上模块名
  state: {
    name: 'lee',
    age: 23,
  },
  mutations: {

  },
  getters: {

  },
  actions: {

  }
};

// 定义模块B
const moduleB = {
  state: {
    name: 'wang',
    age: 22
  },
  mutations: {

  },
  getters: {

  },
  actions: {

  }
}

访问模块中的数据，要加上模块名

获取数据项：  {{$store.state.模块名.数据项名}}

获取getters： {{$store.getters['模块名/getters名']}}

访问模块中的mutations/actions:

$store.commit('mutations名')        // namespaced为false

$store.commit('模块名/mutations名')  // namespaced为true

也可以更进一步对文件进行拆分。

mapState来使用公共数据：

用mapState把公共数据（vuex.store）映射到本组件内部的计算属性中

1.按需导入
import { mapState } from 'vuex'


computed: {
  
...mapState(['books'])
}

对象前面的'...' ，用来把对象展开，合并到 computed当中去

数组中放['数据项的名字']

用的时候不能在写成{{$store.state.boos}},而是直接写成{{books}}‘

把 state mutations getters actions 这四个看为全局

modules 指向另一个空间 modules里面的是某一个modules的

state

1.全局state:

 this.$store.state.; 


map辅助函数
 computed: { 
  ...mapState(['xxx']), 

//重新更改一个新名字
  ...mapState({'新名字': 'xxx'})
} 



2.modules中的state:
 

this.$store.state.模块名.xxx; 


 map辅助函数：

computed: { 
  ...mapState('模块名', ['xxx']), 
  ...mapState('模块名', {'新名字': 'xxx'})
}

getters

1.全局getters

- 直接使用：this.$store.getters.xxx

- map辅助函数：
computed: { 
  ...mapGetters(['xxx']), 
  ...mapGetters({'新名字': 'xxx'})
}


2.modules中的getters:

- 直接使用： this.$store.getters.模块名.xxx

- map辅助函数：
computed: { 
  ...mapGetters('模块名', ['xxx']), 
  ...mapGetters('模块名',{'新名字': 'xxx'})
}

mutations

1.全局mutations

- 直接使用：this.$store.commit('mutation名', 参数)

- map辅助函数：
methods: { 
   ...mapMutations(['mutation名']), 
  ...mapMutations({'新名字': 'mutation名'})
}


2.modules中的mutations:

- 直接使用： this.$store.commit('模块名/mutation名', 参数)

- map辅助函数：
methods: { 
  ...mapMutations('模块名', ['xxx']), 
  ...mapMutations('模块名',{'新名字': 'xxx'})
}

actions

1.全局actions

- 直接使用：this.$store.dispatch('action名', 参数)

- map辅助函数：
methods: { 
  ...mapActions(['mutation名']), 
  ...mapActions({'新名字': 'mutation名'})
}


2.modules中的actions:

- 直接使用：  this.$store.dispatch('模块名/action名', 参数)

- map辅助函数：
methods: { 
  ...mapActions('模块名', ['xxx']), 
  ...mapActions('模块名',{'新名字': 'xxx'})
}