Vuex个人总结笔记

一、官网图

大管家先生：什么是vuex

二、安装使用

1.安装

npm i -s vuex

使用脚手架创建vue项目时勾上Vuex，自动配置vuex

vue create 项目名称

三、划分目录结构（模块化）

index.js

//index.js
//一般state不进行抽离
import Vue from 'vue';
import Vuex from 'vuex';

import mutations from './mutations';
import actions from './actions';
import getters from './getters';
import modulesA from './modules/modulesA';

Vue.use(Vuex);

const state = {
  cartList: [],
};

export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules: {
   a:modulesA
},
});

modulesA.js

//modulesA.js
export default {
  state: {},
  mutations: {},
  getters: {},
  actions: {},
};

mutations-types.js（const 变量=方法名）

//mutations-types.js
export const ADD_COUNT="add_count";
export const ADD_TO_CART="add_to_cart";

mutations.js

//mutations.js
//导入mutations-typs，可将方法名改为变量
import { ADD_COUNT, ADD_TO_CART } from "./mutations-types";

export default {
  [ADD_COUNT](state, payload) {
    payload.count += 1;
  },
  [ADD_TO_CART](state, payload) {
    state.cartList.push(payload);
  }
};


//vue组件
<script>
import {ADD_COUNT} form '../../store/mulataions-types'

methods:{
addCount(){
this.$store.commit(ADD_COUNT)
}
}
</script>

actions.js

//actions.js
//导入mutations-typs，可将方法名改为变量
import { ADD_COUNT, ADD_TO_CART } from './mutations-types';

export default {
  addCart(context, payload) {
    let oldProduct = context.state.cartList.find((item) => {
      return item.iid === payload.iid;
    });
    if (oldProduct) {
      context.commit(ADD_COUNT, oldProduct);
    } else {
      payload.count = 1;
      context.commit(ADD_TO_CART, payload);
    }
  },
};

getters.js

//getters.js
export default {
  cartLength(state) {
    return state.cartList.length;
  },
  cartList(state) {
    return state.cartList();
  },
};

四、五大核心

1.state（相当于data）

<h1>{{$store.state.counter}}</h1>

  state: {
    counter: 10,
  },

2.getters（相当于computed计算属性）

//app.vue
<h1>{{$store.getters.powerCounter}}</h1>

//index.js
getters: {
    powerCounter(state) {
      return state.counter * state.counter;
    },
  },

getters使用第二个参数：getters

getters:{
  more20stu(state){
    return state.students.filter(s=>s.age>20)
  },
  more20stuLength(state,getters){
    return getters.more20stu.length
  }
}

使用getters时传递参数：返回一个函数即可

getters:{
fullName(state) {
      return (state.name = '王五');
    },
stuAge(state, getters) {
      return function(age) {
        console.log(getters.fullName)
        return state.students.filter((n) => n.age > age);
      };
    },
}

3.mutation（相当于methods，不能添加异步操作代码）
（1）使用方法

//vue组件
<button @click="addCounter">增加</button>

addCounter(){
      this.$store.commit('add')
    }

//vuex文件
mutations: {
    add(state) {
      state.counter++;
    },
  },

（2）提交风格
方式一:传递值

//App.vue
<button @click="addCounters(10)">增加10</button>

addCounters (con) {
      this.$store.commit("add",con)
    },

//index.js
add(state,con) {
      return state.counter+=con;
    },

方式二：传递对象

addStudent(){
 const stu={id:114,name:"alan",age:35}
 this.$store.commit('addStudent',stu)
}

//mutations
addStudent(state,stu){
state.students.push(stu)
}

//App.vue
<button @click="addCounters(10)">增加10</button>

addCounters (con) {
      this.$store.commit({
        type: "addCounters",
        con,
      })
    },

//index.js
addCounters(state, payload) {
      // return (state.counter += payload.con);
      console.log(payload.con);
    },

小结

this.$store.commit("方法名",payload)

//vuex
方法名(state,payload)

4.actions（相当于异步methods）
（1）使用

//App.vue
<button @click="changeInfo">修改信息</button>

methods: {
    changeInfo () {
      this.$store.dispatch("aChangeInfo","我是payload")
    },


//index.js
mutations: {
    changeInfo(state) {
      return (state.info.name = 'Wayhome');
    },
},
  actions: {
    aChangeInfo(context,payload) {
      setTimeout(() => {
        context.commit('changeInfo');
        console.log(payload);
      }, 1000);
    },
  },

（2）对象的解构（context可以当成store）

  aChangeInfo(context) {
      setTimeout(() => {
        context.commit('changeInfo');
        console.log(payload);
      }, 1000);
    },

context表示上下文的关系
context可以解构为{state,commit}，所以可以改为
  aChangeInfo({state,commit}) {
      setTimeout(() => {
        context.commit('changeInfo');
        console.log(payload);
      }, 1000);
    },

添加回调函数，查看actions是否已经执行

  //vue组件
  updateInfo() {
    this.$store.dispatch("aUpdateInfo", {
      message: "我是携带的参数",
      success: () => {
        console.log("里面已经完成了");
      }
    })
  }


  //store 里面的index.js
  aUpdateInfo(context, payload) {
    setTimeout(() => {
      context.commit("updateInfo");
      console.log(payload.message);
      payload.success()
    }, 1000)
  }

5.modules

//index.js
const modulesA = {
  state: {
    name: '张三',
  },
  mutations: {
    changeName(state) {
  state.name = '李四';
    },
    UpdateName(state, payload1) {
      return console.log(payload1);
    },
  },
  getters: {
    fullName(state) {
      return (state.name = '王五');
    },
    fullName2(state, getters, rootState) {
      return getters.fullName + rootState.counter;
    },
  },
  actions: {
    aUpdateName(context, payload2) {
      setTimeout(() => {
        context.commit('UpdateName',"payload1");
        console.log(payload2);
      }, 1000);
    },
  },
};

const store = new Vuex.Store({
  state: {
    counter: 111,
  },
  modules: {
    a: modulesA,
  },
});

//使用
//App.vue

<h1>{{$store.state.a.name}}</h1>
    <h1>{{$store.getters.fullName2}}</h1>
    <button @click="changeName">修改名字</button>
    <button @click="UpdateName">异步修改名字</button>

methods: {
    changeName () {
      this.$store.commit("changeName")
    },
    UpdateName () {
      this.$store.dispatch("aUpdateName", "payload2")
    }
  }
}

五、简单使用

1.用state和mutations修改数值

//App.vue
<h1>{{$store.state.counter}}</h1>
<button @click="addCounter">增加</button>

methods{
addCounter(){
      this.$store.commit('add')
    },
 btnClick() {
      this.$store.commit(ADD_STUDENT, {
        name: "张三",
        age: 18,
      });
    },
    btnClick() {
      this.$store.commit({
        type:TO_ADD,
        payload:{
          name:"张三",
          age:20
        }
      });
    },
    btnClick() {
      this.$store.commit({
        type:TO_ADD,
        payload:{
          name:"张三",
          age:20
        }
      });
    },
}

//index.js
state: {
    counter: 10,
  },
mutations: {
    add(state) {
      state.counter++;
    },
  },

2.getters计算属性

getters: {
    stu(state) {
      return state.students.filter((n) => n.age > 18);
    },
    stuCounter(state,getters) {
      return getters.stu.length;
    },
  },

3.传递参数
（1）getters（可使用mapGetters重构：重构链接）

//App.vue
<h1>{{$store.getters.stuAge(20)}}</h1>

//index.js
state: {
    counter: 10,
    students: [
      { id: 1, name: '张三', age: 10 },
      { id: 2, name: '李四', age: 20 },
      { id: 3, name: '王五', age: 30 },
    ],
  },

getters:{
fullName(state) {
      return (state.name = '王五');
    },
stuAge(state, getters) {
      return function(age) {
        console.log(getters.fullName)
        return state.students.filter((n) => n.age > age);
      };
    },
}

（2）mutations

//App.vue
<button @click="addCounters(10)"></button>
methods:{
addCounters (con) {
      this.$store.commit("addCounter", con)
    }}

//index.js
mutations: {
    addCounter(state, con) {
      return (state.counter += con);
    },
  },

六、vuex运作流程

流程讲解（看代码）：
1.监听clickCart事件；

2.vue组件---->actions:使用dispatch，将addCart和cart发送给actions；

3.actions接收addCart(context,payload)，第一个context是一个对象，为{state,commit}，payload是vue组件发过来的cart；

4.actions发送（commit）addCount和addToCart给mutations；

5.mutations接收addCount(state,payload)，其中payload为oldProduct；接收addToCart(state,payload)，其中的payload参数，为context.commit('addToCart', payload)中的payload，而这个payload又是addCart(context, payload)中的payload，即传过来的cart；

注：payload传递方向
（1）vue组件的cart---->actions的addCart(state,payload)的payload----> context.commit('addToCart', payload)的payload---->mutations的 addToCart(state, payload) 的payload。

（2）addCart定义的oldProduct----> context.commit('addCount', oldProduct)中的oldProduct----> addCount(state, payload) 中的payload。

//vue组件
<template>
<detail-bottom-bar @clickCart="clickCart" />
</template>

methods:{
clickCart() {
      const cart = {};
      cart.img = this.topImg[0];
      cart.title = this.goods.title;
      cart.desc = this.goods.desc;
      cart.price = this.goods.realPrice;
      cart.iid = this.iid;
      this.$store.dispatch("addCart", cart);
    }
}

//store仓库
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    cartList: [],
  },
  mutations: {
    addCount(state, payload) {
      payload.count += 1;
    },
    addToCart(state, payload) {
      state.cartList.push(payload);
    },
  },
  actions: {
    addCart(context, payload) {
    //让oldProduct的指针指向iid相等item
      let oldProduct = context.state.cartList.find(
        (item) => {
          return item.iid === payload.iid;
        }
      );
      if (oldProduct) {
        context.commit('addCount', oldProduct);
      } else {
        payload.count = 1;
        context.commit('addToCart', payload);
      }
    },
  },
  modules: {},
});

七、在uniapp中使用vuex

https://blog.csdn.net/weixin_44143975/article/details/88815728