关于vuex及五大核心概念(用法)

核心用法：

1. mapState(读取this.$store.state中的数据)

vuex：

 state: {
    sum: 0,
    userInfo: {
      name: "小三",
      sex: "女",
      age: 18,
      like: "找男人"
    }
  },

页面中使用：

import { mapState } from "vuex";
/* 此时可直接使用this.sum读取vuex中的数据 */
computed: {
  ...mapState(["sum", "userInfo"]),
 },

2.mapGetters(可二次处理vuex中的数据展示(计算属性用法))

vuex:

 state: {
    sum: 0,
    userInfo: {
      name: "小三",
      sex: "女",
      age: 18,
      like: "找男人"
    }
  },
 getters: {
    doneTodos: (state) => {
      return state.userInfo.sex
    }
  },

页面中：

import { mapGetters } from "vuex";
  created() {
  /* 输出： 女 */
    console.log(this.doneTodos);
  },
 computed: {
    ...mapGetters(["doneTodos"]),
  },

3.1.关于mapActions的用法(mutations与actions配合使用)(修改vuex中的数据)(不传参)

vuex：

state: {
   sum: 0,
},
mutations: {
    GET_INCREMENT(state) {
      setInterval(() => {
        // 变更状态
        state.sum++
      }, 1000)
    }
  },  
 actions: {
   setIncrement({ commit }) {
     commit('GET_INCREMENT')
   }
 },

在页面里： 点击按钮 通过mapActions触发actions调用mutations中的方法
ps：具体异步方法写到mutations的方法中

 <el-button type="info" @click="Onclick">点击试试</el-button>
 
import { mapActions } from "vuex";
  methods: {
    ...mapActions({
      Onclick: "setIncrement", 
    })
  }

3.2.关于mapActions的用法(mutations与actions配合使用)(修改vuex中的数据)(两种传参方法)

vuex：

 state: {
    sum: 0,
 },
  mutations: {
    CLI_ADD(state, data) {
      state.sum = data
    },
},
 actions: {
    add({ commit }, data) {
      commit('CLI_ADD', data)
    },
  }

页面中：（第一种传输参数）

<el-button @click="number++">CLICK</el-button>
<el-button type="info" @click="Onclick(number)">点击试试</el-button>

import { mapActions } from "vuex";
data() {
    return {
      number: 0,
    };
},
methods:{
	...mapActions({
    	 Onclick: "add",
   }),
}

页面中：（第二种传输参数）

<el-button type="info" @click="Onclick(number)">点击试试</el-button>
<el-button @click="aaa">click</el-button>

import { mapActions } from "vuex";
data() {
    return {
      number: 0,
    };
},
methods:{
 	aaa() {
      this.Onclick(123);
    },
	...mapActions({
    	 Onclick: "add",
   }),
}

·········································分割线····································································

基础用法：

在页面中：
	<el-button @click="click">111111</el-button>
	 click() {
      		this.$store.dispatch("add", 20);
      		console.log(this.$store.state.sum)  //查看vuex属性的值
   	  },


在vuex中：
state: {
     	sum: 0,
   	},
mutations: {
	cliadd(state, data) {
  		state.sum += data
  	}
},
actions: {
	add(context, data) {
  		context.commit('cliadd', data)
	}
}