vuex学习

Vuex

原理图

原理图
感觉vuex比起pinia难

一、个人理解，Vc 要操作数据，通过在 methods 方法中调用

this.$store.dispatch("Action对象中的方法名", data);

二、然后在 index.js 中的 actions 对象中添加这个方法

const actions = {
  Action方法名(content, value) {
    content.commit("mutations对象中的方法名", value);
  },
};

三、最后在 index.js 中 mutations 对象中操作

const mutations = {
  mutation方法名(state, value) {
    //进行的操作
  },
};

特殊之处：

Vc 中 methods 中的方法不经过 actions，直接对 mutations 进行操作,类似于我不让服务员为我点餐，我直接对厨师进行传递

methods:{
    func(){
        //相当于省去了dispatch的这一步
        this.$store.commit('mutation中的方法',data);
    }
}

另外，Vuex 中的 actions 不止能有一个，当一件事情非常的复杂，我们需要多个"动作"来为我们服务，如下，类似于让一个服务员为我们点菜，一个为我们上菜，一个为我们服务

const actions={
    func(context,value){
        context.dispatch('demo1',value);
    }
     demo1(context,value){
        context.dispatch('demo2',value);
    }
     demo2(context,value){
        context.commit('mutation中方法',value);
    }

}

建议，aciton 中的方法写为小写，然后 mutation 中的方法写成大写，这样更能够体现出这才是我们调用操作数据的重点

1. context 类似是一个精简版本的 store，能够提供我们想要的基本的操作

2. value 是从 vc 中传递过来的数据参数

3. 数据存在 state 对象中,拿到数据需要找到 state

4. Vue.use(Vuex)应该写在 index.js 中

   因为在 js 中，存在变量提升，倘若写在 main.js 中的话，会在使用插件之前就调用，那就会出现报错的提示

5. vue 开发者工具中 vuex 的使用

Vuex 的环境配置

1. 首先安装 Vuex

   npm i vuex@3//支持vue2
   npm i vuex //默认安装vue3版本的
   

   后续的操作都在 src 下新建的文件夹 store 下的 index.js 中操作

2. 引入 Vue 和 Vuex

   //引入vue
   import Vue from "vue";
   //引入vuex
   import Vuex from "vuex";
   

3. 应用插件 vues

   Vue.use(vuex);
   

4. 准备 actions

   //action用于响应组件中的动作
   const actions = {};
   

5. 准备 mutations

   //mutations用于操作数据(state)
   const mutations = {};
   

6. 准备 states

   //state用于存储数据(state)
   const state = {};
   

7. 创建并导出 Store

   export default new Vuex.Store({
     actions,
     mutations,
     state,
   });
   

   main.js

8. 引入插件 vuex

   import Vuex from "vuex";
   

9. Vm 组件中配置 store 配置项

   new Vue({
     el: "#app",
     render: (h) => h(App),
     store,
     beforeCreate() {
       Vue.prototype.$bus = this;
     },
   });
   

getter

在 index.js 中创建 getters 对象，作用是类似 vc 中的计算属性，我们可以使用 getters 操作加工 state 的数据。

//创建getters用于将state中数据进行加工
//逻辑复杂，并且需要复用可以使用，类似vc中的计算属性
const getters = {
  bigSum(state) {
    return state.sum * 10;
  },
};

在 vc 中调用的时候可以写成

computed:{
    //这是我们定义的vc中的bigSum
    bigSum(){
        //返回的是getters里的bigSum
        return this.$store.getters.bigSum;
    }
}

四个 map

mapState

当我们在 vc 利用了很多个计算属性，这时候来调用 vuex 的话，我们需要写的东西就会很多很多。这时候可以利用mapState来简化书写。

一、这是我们自己书写计算属性

// 1 靠程序员亲自写计算属性,来调用state中的属性
computed:{
    sum() {
        return this.$store.state.sum;
    },
    school() {
        return this.$store.state.school;
     },
    subject() {
         return this.$store.state.subject;
    },
}

二、我们调用mapState

首先我们需要在这个 Vc 里导入这个 mapState

import { mapState } from "vuex";

//1 对象写法，借助mapState生成计算属性
computed:{
      ...mapState({sum:'sum',school:'school',subject:'subject'})
      // he，xuexiao，xueke我在vc中调用的时候的名称
    //vc中调用名：vuex中state中的数据名
      // ...mapState({ he: "sum", xuexiao: "school", xueke: "subject" }),

}
//2 数组写法 ，借助mapState生成计算属性
computed:{
    ...mapState(['sum','school','subject'])
}

mapGetters

类似与 mapState，不过这时候就是遍历的 getters 中的函数。

首先还是要在 vc 中导入

import { mapGetters } from "vuex";

      // 1 接触mapgetters从getters中读取数据，对象写法
      // ...mapGetters({ bigSum: "bigSum" }),
      //2 借助mapgetters从getters中读取数据， 数组写法
      ...mapGetters(["bigSum"]),

mapMutaitons 和 mapActions

在我们调用 vuex 操作数据的时候，我们需要在 vc 的 methods 中自己选择

methods:{
    //前两种直接提交给mutaitons
    increment() {
        this.$store.commit("JIA", this.n);
      },
      decrement() {
        this.$store.commit("JIAN", this.n);
      },
      //后两种先交给actions
      incrementOdd() {
        this.$store.dispatch("jiaodd", this.n);
      },
      incrementWait() {
        this.$store.dispatch("jiawait", this.n);
      },
}

以上是我们用最原始的 vuex 来调用的方法

修改上面两种方法

methods:{
    //1 借助mapmutaitions生成对应的方法，方法中会调用commit去联系mutaitions（对象写法）
      ...mapMutations({ increment: "JIA", decrement: "JIAN" }),
}

这个时候添加事件触发方法不能这样写了：

<button @click="increment">点击触发increament</button>

如果这个时候直接调用的的话，如上，vue 不知道我们要操作的数据到底是 vc 中的哪一个，默认传一个参数就是：event 事件对象

倘若我们要操作的数据是：

data(){
    n:1,
}

触发事件的时候需要自己传参数 n 进去

<button @click="increment(n)">点击触发increament</button>

mapActions也是一样的,在调用函数触发事件的时候需要自己传入参数

computed:{
          //1 对象写法
      ...mapActions({ increment: "jiaodd", decrement: "jiawait" }),
      //2 数组写法
      // ...mapActions(['jiaoddd','jiawait']),
}