vuex学习笔记

Posted 2020-10-03 zhaobao1830

参考地址：https://vuex.vuejs.org/zh-cn/intro.html

                 https://www.jianshu.com/p/2fa10b29488d

Vuex 是什么？

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

什么是“状态管理模式”？

 1 new Vue({
 2   // state
 3   data () {
 4     return {
 5       count: 0
 6     }
 7   },
 8   // view
 9   template: `
10     <div>{{ count }}</div>
11   `,
12   // actions
13   methods: {
14     increment () {
15       this.count++
16     }
17   }
18 })

这个状态自管理应用包含以下几个部分：

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

一个全局单例模式：

对上面图的理解：把所有的状态和数据放到一个独立的内存空间进行管理，称为state,state里面的数据会映射到组件上，当组件上的数据法还是能改变时，会通过dispatch作用域actions，actions可以进行一些异步操作，比如与后端进行交互，然后会commit一个Mutations，（我们在组件中也可以commit一个Muations），commit Muations是唯一一个可以修改state的方式，其他任何方式都是不允许的

这样设计是为了让state修改可以预测，state修改会映射到组件中

引用场景：

      1、解决多个组件中的状态共享，这些组件是兄弟组件或者是一些关联度很低的组件，如果用$emit和prop这种方式，会非常复杂

      2、数据传递。比如遇到一些跳转场景，参数非常复杂，就可以用vuex

如果项目简单，就没必要用Vuex

...mapGetters([])写在computed里面

 

1  computed: {
2     ...mapGetters([
3       \'nowComp\'
4     ])
5   },

 

 

 

 

...mapMutations({})写在methods里面

 

1  childSelect (route) {
2       this.chSelect = route
3       this.setNowComp(route)
4     },
5     ...mapMutations({
6       setNowComp: \'SET_NOWCOMP\'
7     })