Vuex 是什么？

Vuex 有什么作用？

某个状态的变化可以在组件内实时监测、并进行处理

Vuex 优劣

  • 可维护性会下降，你要想修改数据，你得维护三个地方
  • 可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的
  • 增加耦合，大量的上传派发，会让耦合性大大的增加，本来 Vue 用 Component 就是为了减少耦合，现在这么用，和组件化的初衷相背。

Vuex 的属性

  • mode
  • state(存放状态)
  • action(提交 mutation，进行异步操作)
  • getters(state 的计算属性)
  • modules(将 store 模块化)
  • mutation(更改状态逻辑，进行同步操作)
  • plugins

mode

  • true 严格模式
  • false 非严格模式

state

  • Vuex 其实就是一个仓库，仓库里面放了很多对象。其中 state 就是存放数据源的地方，对应与 Vue 对象里面的 data
  • 其中 state 里面存放的数据为响应式数据,Vue 组件从 store 仓库中读取数据，若仓库中的数据发生改变的时候，依赖这个数据的组件也会随之更新
  • state 通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

getters

  • getters 可以对 state 进行计算操作，相当于就是 store 的计算属性
  • 虽然在组件内也有计算属性，但是 getters 可以在多组件复用
  • 如果一个状态只在一个组件内使用，可以不用 getters

mutation

修改仓库数据的唯一途径就是提交（commit） mutations 方法

action

类似 mutations，一般情况下，actions 用来处理有副作用的操作，并且不可以直接更改仓库的状态（严格模式下）

  • mutation 必须是同步操作
  • action 可以包含任意的异步操作
  • action 提交的是 mutation，不是直接变更状态（严格模式下）
  • dispatch 视图触发 action，action 触发 mutation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const store = new Vuex.Store({
  state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
  //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  },
});

Vuex - 辅助函数

首先在讲解用法前我们先创建一个仓库实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import Vue from 'vue'
import Vuex from 'vuex'
import {Mockurl} from '@/until'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
      count:0,
      data:[]，
      sex:0
      },
  mutations: {
      changeData(state,actions){
          state.data = [...actions.data]
      },
      add(state){
        ++state.count
      },
      dis(state){
        --state.count
      }
  },
  actions: {
      getData(store){
          axios.get('/get/data').then(data=>{
              store.commit('changeData',data)
          })
      }
  },
  getters:{
      sex(state){
          return state.sex === 0 ? '男':'女'
      }
  }
})

mapState 读取仓库状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
 <div>{{count}}</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
 // 写法一
 // mapState返回值是对象
 // 结合扩展运算符展开对象,方便扩展计算属性
 computed:{
  ...mapState(['count']),
   val(){
   	return someval
   }
 },
  // 写法二
  computed:mapState(['count']),
  // 写法三
  computed:mapState({
  	count:store=>store.count;
  }),

}
</script>

mapGetters 数据派生

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>
  	性别:{{sex}}
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  export default {
    computed:{
      ...mapGetters(['sex'])
    }
  }
</script>

mapMutations 修改仓库状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
 <div>
    <span @click="dis" >-</span>
    {{count}}
    <span @click="add" >+</span>
 </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
 methods:{
    ...mapMutations(['add','dis'])
 }
}
</script>

mapActions 异步处理

1
2
3
4
5
6
7
8
<script>
import { mapActions } from 'vuex'
export default {
 methods:{
    ...mapActions(['getData'])
 }
}
</script>

Vue3.x

通过 useStore 绑定仓库共享的状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div class="about">
    <h1>{{ name }}</h1>
  </div>
</template>
<script>
 import { useStore } from "vuex";
 import { computed } from "vue";

export default {
 setup(){
 	const store = useStore();
  const name = computed(()=>store.state.app.name)
  // 通过返回函数提交mutations
  return {
  	add:()=>store.commit('add',123)
  }
 }
}
</script>