目录
知识不足的地方赶快点击学习呦~~~
Vuex入门(一)—— state,mapState,…mapState对象展开符详解
Vuex入门(二)—— mutations详解
Vuex入门(三)—— getters,getters,…getters对象展开符详解
Vuex入门(四)—— action和…mapActions详解
Vuex入门(五)—— 封装module全网最全详解(带源码)
Vuex入门(六)——mapState, mapGetters, mapMutations, mapActions全网最全详解终结篇(带源码)
Vuex官网:/zh/guide/#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84-store
1.store.js
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {// 类似于 datanum:1000000,count: 1,name: '小明',sex: '男',from: '中国'},mutations: { // 类似于计算属性 computedincrement(state) { // 把上面state对象当参数传入,取对象里面的进行操作state.count++},decrement(state) {state.count--}},actions: {},modules: {}})
2.state.vue组件state详解 + 图片
<template><div class="page"><p style="font-size: 20px">由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在 `计算属性` 中返回某个状态：</p><br /><p style="font-size: 18px">一:从store调用state值</p><br /><div><span style="color: blue">值1:</span><span style="color: red">{{ num }}</span></div><br /><p style="font-size: 18px">二:从store调用state值里面count值,mutations调用方法,触发状态变更</p><br /><div style="display: flex"><button @click="increment" style="width: 100px">+</button> {{ count }} <button @click="decrement" style="width: 100px">-</button></div></div></template><script>export default {data() {return {};},computed: {num() {return this.$store.state.num; // 这里是从状态管理store.js获取的值state 语法为: this.$store.state.XXX(想要的属性值)},count() {return this.$store.state.count;},},methods: {increment() {this.$mit("increment"); // 这里是从状态管理store.js获取的方法mutations 语法为: this.$mit("XX"); XX为mutations里面定义好的方法名,随意定,按js命名规范就行，调用就行},decrement() {this.$mit("decrement");},},};</script><style scoped>.page {display: flex;flex-direction: column;}</style>
如下图
3.mapState.vue调用多个state值用mapState 和 …mapState 用起来方便 ,和mapMutations用法
使用mapState辅助函数,要引入
import { mapState } from "vuex";方法
<template><div class="page"><h1>mapState 辅助函数</h1><p style="font-size: 16px">当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState 辅助函数帮助我们生成计算属性，让你少按几次键：</p><div>方法1:{{ name }}</div><div>方法2:{{ sex }}</div><div>方法3:{{ from }}</div></div></template><script>import { mapState } from "vuex";export default {data() {return {country: "北京",};},computed: mapState({name: "name", // 第一种调用state方式sex: (state) => state.sex, // 第二种调用state方式 箭头函数ES6语法from: function (state) {// 第三种调用state方式 常规函数return state.from + "-" + this.country;},}),// computed: {// ...mapState({//// 以下面用d是第一种调用state方式//name: "name",//sex: "sex",//from: "from",// }),// // 或者简写为!!!!!!!!!// ...mapState(["name", "sex", "from"]), // },// mapMutations 和 mapState 用法一样，mapMutations是用来存放vuex里面的mutations函数的，如下：// import {mapMutations} from 'vuex'// ......// methods : {//...mapMutations([// 'increment'// ]),// }};</script><style scoped>.page {display: flex;flex-direction: column;}</style>
如下图
感觉文章好的话记得点个心心和关注，有错的地方麻烦指正一下，多谢！！！
