Vuex3(对应Vue2.x) & Vuex4(对应Vue3.x)

Vuex 的学习

• 关于Vue、Vuex、Vue-router、Vue-cli的版本问题请猛戳这里

Vuex 是做什么的(基于Vuex3对应Vue2.x的)

---

1. Vuex 是 Vue 的状态管理模式.可能有很多的组件需要使用一个数据,这时,将这个数据放在哪个文件里面进行管理都不好,所以使用 Vuex 这个大管家.

2. new 一个对象,视为管家,这样在使用的时候就可以多个组件之间共享,都可以修改并共用.而且是响应式的.

3. 其实可以使用 vue.prototype 就是 vue 的原型来进行共享这一个对象,但是这样不太好,因为不是响应式的,所以就使用的 Vuex 来进行管理.

4. 使用场景,在用户登陆信息,进行 token 的信息,要进行共享,所以就可以放在 Vuex 里面.

Vuex 的使用

---

1. 下载你 npm install --save vuex
2. 配置,注意 Vuex 要放在自己的 store 文件夹里面.
3. 使用:

import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

const store = new Vuex.store({
   
  // 保存状态的对象.通过$store.state.name来使用
  state:{
   
    name:‘bob’,
    counter: 0
  },
  // 同步操作时候使用的
  mutations: {
   
    addition(state){
   
      state.counter++
    }
  },
  // 异步操作使用的,就是与后端进行数据交互.
  action: {
   },
  getters:{
   
    powCounter(state){
   
        return Math.pow(state.counter,2)
    },
    more20Stu(state) {
   
      return state.student,filter(s => s.age >20)
    },
    //  可以传递第二个参数就是getters,这个getters就是store里面的getters.
    more20StuLength(state,getters){
   
      return getters.more20Stu.length
    }
    // 如果希望可以在使用的时候传递参数,那么就使用返回一个函数的方式来进行,
    moreAgeStu(state){
   
      // 这里的age就是使用的过程中传递回来的参数
      return function(age){
   
        // 返回的是student数组中,年龄大于传入年龄参数的学生.
          return state.student.filter(s => s.age> age)
      }
    }
  }