vuex笔记

最新推荐文章于 2023-04-10 19:29:30 发布
最新推荐文章于 2023-04-10 19:29:30 发布
阅读量243 收藏 1
点赞数 1
分类专栏： 笔记 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yxorg/article/details/126655446
版权

1.vuex介绍

目标

  • 什么是vuex
  • 为什么学习vuex

通信方案

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gvkNfV2A-1662081248271)(images/image-20210323175925844.png)]

组件关系数据通信
父子关系父传子：props ； 子传父：$emit
非父子关系vuex (一种组件通信方案)

vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理数据，以相应的规则保证状态以一种可预测的方式发生变化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G3Bzm6et-1662081248272)(images/image-20210323180002533.png)]

vuex为何学

程序页面多, 数据变量多

  1. 不同组件数据保持同步
  2. 数据的修改都是可追踪

一个户外商店有两名员工，张三和李四

一天的早上，他们分别对帐篷的数量做了一次盘点，发现一共有三个帐篷

张三卖出去俩个，他以为库存里还有一个

李四卖出去一个，他以为库存里还有两个

而事实上是，库存现在已经为零

如果他们再接受客户的预订，就会出现库存不足的情况

张三和李四因为没有保持库存的数量的同步导致了尴尬，这个就是所谓的数据保持同步

店长需要知道, 谁卖出了多少个帐篷，这个行为我们称之为数据修改是可追踪的

图示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f4kATE0h-1662081248272)(images/image-20210601212946879.png)]

vuex中存什么

多个组件共享状态，才存储在vuex中

某个组件中的私有数据，依旧存储在data中

例如：

  • 登陆的用户名需要在首页, 个人中心, 结算页面使用, 用户名存在vuex中

  • 文章详情数据, 只有在文章详情页查看, 在自身data中声明

小结

  1. 什么是vuex
    • vuex是Vue官方推荐的集中式状态管理机制
  2. 为何学vuex
    • 数据同步, 集中管理
  3. vuex中存什么
    • 多个组件共享的值

2.vuex学习内容

目标

  • 知道vuex要学习什么

核心概念

  1. 官网地址: https://vuex.vuejs.org/zh/

  2. 安装(固定)

  3. 配置项(固定)

    配置项含义注意
    state单一状态树类似data
    mutations数据管家(同步)唯一修改state地方
    actions异步请求要改state需要提交给mutations
    gettersvuex计算属性类似computed
    modules模块拆分

图示关系

单一定义store对象, 里面5个配置项, 在任意组件可以使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-izb3aUjs-1662081248272)(images/image-20210601215035990.png)]

小结

  1. vuex五个核心概念是?
    • state / mutations / actions / getters / modules

3.vuex例子准备

目标

  • 创建项目, 为学习准备

    • 需求1: App.vue(作为根组件)

    • 需求2: 子组件Add和子组件Sub, 嵌入在App.vue里

    • 需求3: 三个组件共享库存数据(保持同步)

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dcy4JPgR-1662081248273)(images/vuex例子.gif)]

工程准备

  1. 初始化新的工程 vuex-demo

    vue create vuex-demo

  2. 清空欢迎界面

  3. 并设置如下三个组件, 目录如下：

    |-components
|---AddItem.vue
|---SubItem.vue
|-App.vue

App.vue

复制标签和样式, 引入AddItem和SubItem2个子组件显示

<template>
  <div id="app">
    <h1>根组件</h1>
    <span>库存总数:</span>
    <input type="text">
    <div style="border:1px solid black; width: 300px;">
      <AddItem></AddItem>
    </div>
    <hr>
    <div style="border:1px solid black; width: 300px;">
      <SubItem></SubItem>
    </div>
  </div>
</template>

<script>
import AddItem from '@/components/AddItem'
import SubItem from '@/components/SubItem'
export default {
  components: {
    AddItem,
    SubItem
  }
}
</script>

<style>
#app {
  width: 300px;
  margin: 20px auto;
  border:1px solid #ccc;
  padding:4px;
}
</style>

AddItem.vue

<template>
  <div>
      <h3>AddItem组件</h3>
      <p>已知库存数: 0</p>
      <button>库存+1</button>
  </div>
</template>

<script>
export default {

}
</script>

SubItem.vue

<template>
  <div>
      <h3>SubItem组件</h3>
      <p>已知库存数: 0</p>
      <button>库存-1</button>
  </div>
</template>

<script>
export default {

}
</script>

小结

  1. App下套用了AddItem和SubItem, 要在3个组件共享一个数据

4.vuex-store准备

目标

  • 创建store仓库
  • 注入到Vue项目中

store概念

每个 Vuex 应用的核心 store（仓库）, 包含5个核心概念

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b93jAQrF-1662081248273)(images/image-20210626135859118.png)]

vuex目录

和路由模块router/index.js - 类似, 维护项目目录的整洁，新建src/store/index.js文件

当然， 这个步骤并不是必需的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MsxhPU89-1662081248273)(images/image-20210323183824648.png)]

使用步骤

  1. 工程中 - 下载vuex

    yarn add vuex

  2. store/index.js - 创建定义导出store对象

    // 目标: 创建store仓库对象
// 1. 下载vuex: 终端命令(yarn add vuex)
// 2. 引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 3. 注册
Vue.use(Vuex)
// 4. 实例化store对象
const store = new Vuex.Store({})
// 5. 导出store对象
export default store

  3. main.js - 导入注入到Vue中

    import Vue from 'vue'
import App from './App.vue'
import store from '@/store' // 导入store对象

Vue.config.productionTip = false

new Vue({
  // 6. 注入到Vue实例中(确保组件this.$store使用) // this.$store = store
  store,
  render: h => h(App),
}).$mount('#app')

请再次回忆一下vue-router的用法，是不是很像？

小结

  1. vuex的核心是什么?

    • store对象(包含5个核心属性)

  2. 如何创建store对象?

    • 工程下载vuex模块
    • store/index.js
      • 引入注册
      • 生成store对象导出
      • main.js - 导入注入

5.vuex-state数据源

目标

  • 定义state
  • 直接使用state
  • 辅助函数mapState

state是唯一的公共数据源，统一存储

定义state

在store/index.js定义state

语法:

/*
const store = new Vuex.Store({
    state: {
        变量名: 初始值
    }
})	
*/

具体代码:

const store = new Vuex.Store({
    state: {
        count: 100 // 库存
    }
})

使用state2种方式

  • 方式1: 组件内 - 直接使用

    语法:

    this.$store.state.变量名

  • 方式2: 组件内 - 映射使用 (推荐)

    语法:

    // 1. 拿到mapState辅助函数
import { mapState } from 'vuex'
export default {
    computed: {
        // 2. 把state里变量映射到计算属性中
        ...mapState(['state里的变量名'])
    }
}

AddItem直接用

<template>
  <div>
      <h3>AddItem组件</h3>
      <p>已知库存数: {{ $store.state.count }}</p>
      <button>库存+1</button>
  </div>
</template>

App.vue直接用

计算属性count, 和输入框的v-model双向绑定

<input type="text" v-model="count">

<script>
export default {
  computed: {
    count: {
      set(){},
      get(){
        return this.$store.state.count
      }
    }
  }
}
</script>

SubItem映射用

<template>
  <div>
      <h3>SubItem组件</h3>
      <p>已知库存数: {{ count }}</p>
      <button>库存-1</button>
  </div>
</template>

<script>
// 需求1: 映射state到计算属性
// 1. 拿到辅助函数 mapState
// 2. 在computed内, ...mapState(['state变量名'])
// 3. 当计算属性使用
import { mapState } from 'vuex'
// let r = mapState(['count']) // 提取store里的state叫count的变量
// console.log(r); // 返回值: {count: 函数体(return state里count的值)}

export default {
  computed: {
    // 映射count, 得到对象展开, 合并到计算属性中
    ...mapState(['count'])
  },
}
</script>

整个过程的示意图如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-56bIhZjq-1662081248274)(images/image-20210323201917787.png)]

注意

state是响应式的, 只要state值变化, 页面上使用的地方会自动更新同步

小结

  1. state作用?

    定义全局状态数据源

  2. state如何定义?

    在store内, state: {变量名: 初始值}

  3. state的值如何用到具体vue组件内?

    • 直接使用 this.$store.state.变量名
    • 映射使用 …mapState([‘state的变量名’])

6.vuex-mutations定义-同步修改

目标

  • 定义mutations

定义mutations

mutations类似数据管家, 操作state里的数据

在store/index.js定义mutations

语法:

/*
const store  = new Vuex.Store({
	mutations: {
		函数名 (state, 可选值) {
			// 同步修改state值代码
		}
	}
})
*/

具体代码

const store  = new Vuex.Store({
    state: {
        count: 100 // 库存
    },
	mutations: {
		addCount (state, value) { // 负责增加库存的管家
			state.count += value
		},
        subCount (state, value) { // 负责减少库存的管家
            state.count -= value
        },
        setCount (state, value) { // 负责直接修改库存的管家
            state.count = value;
        }
	}
})

注意

  1. mutations是唯一能修改state的地方, 确保调试工具可以追踪变化
  2. mutations函数内, 只能写同步代码, 调试工具可追踪变化过程
    • 因为调试工具要立刻产生一次记录, 所以必须是同步的

小结

  1. mutations里函数作用?

    • 负责修改state里的数据

  2. mutations只能写什么样的代码?

    • 同步流程的代码

7.vuex-mutations使用

目标

  • 使用mutations2种方式
  • mutations注意事项

使用mutations的2种方式

  • 方式1: 组件内 - 直接使用

    语法:

    this.$store.commit("mutations里的函数名", 具体值)

  • 方式2: 组件内 - 映射使用

    语法:

    // 1. 拿到mapMutations辅助函数
import { mapMutations } from 'vuex'
export default {
    methods: {
        // 2. 把mutations里方法映射到原地
        ...mapMutations(['mutations里的函数名'])
    }
}

AddItem直接用

  • 点击事件绑定
  • 提交mutations传入值
<button @click="addFn">库存+1</button>

<script>
export default {
  methods: {
    addFn(){
      this.$store.commit('addCount', 1)
    }
  }
}
</script>

App.vue直接用

  • 触发计算属性的set方法
  • 提交mutations传入值
<span>库存总数: </span>
<input type="text" v-model="count">

<script>
export default {
  computed: {
    count: {
      set(val){
        this.$store.commit('setCount', val) // 把表单值提交给store下的mutations
      },
      get(){
        return this.$store.state.count
      }
    }
  }
}
</script>

SubItem映射用

  • 点击事件
  • 映射mutations的方法
  • 调用mutations方法传值
<button @click="subFn">库存-1</button>

<script>
// 需求2: 映射mutations到方法里
// 1. 拿到辅助函数 mapMutations
// 2. 在methods内, ...mapMutations(['mutations函数名'])
// 3. 当普通方法使用

import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['subCount']),
    subFn(){
      this.subCount(1)
    }
  }
}
</script>

注意

mutations函数上, 只能接收一个参数值, 如果传对个, 请传一个对象

小结

  1. mutations有哪2种使用方式?

    直接使用 this.$store.commit()

    映射使用 mapMutations把方法映射到组件内直接调用

  2. state, mutations, 视图组件, 3个关系是什么?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hK484mac-1662081248274)(asset/mutation.jpg)]

8.vuex-actions定义-异步修改

目标

  • 定义actions

定义actions

在store/index.js定义actions

语法:

/*
const store = new Vuex.Store({
	actions: {
		函数名 (store, 可选值) {
			// 异步代码, 把结果commit给mutations给state赋值
		}
	}
})
*/

具体代码:

const store  = new Vuex.Store({
    // ...省略state和mutations此处
    actions: {
        asyncAddCount(store, num){
            setTimeout(() => { // 1秒后, 异步提交给add的mutations
                store.commit('addCount', num)
            }, 1000)
        },
        asyncSubCount(store, num) {
            setTimeout(() => { // 1秒后, 异步提交给sub的mutations
                store.commit('subCount', num)
            }, 1000)
        }
    }
})

小结

  1. actions和mutations区别?

    mutations里同步修改state

    actions里放入异步操作

  2. actions是否能操作state?

    不建议, 要commit给mutations(为调试工具可追踪)

  3. actions和mutations里函数, 第一个形参分别是什么?

    mutations的是state

    actions的是store

9.vuex-actions使用

目标

  • 使用actions

使用actions的2种方式

  • 方式1: 组件内 - 直接使用

    语法:

    this.$store.dispatch('actions函数名', 具体值)

  • 方式2: 组件内 - 映射使用

    语法:

    // 1. 拿到mapActions辅助函数
import { mapActions } from 'vuex'
export default {
    methods: {
        // 2. 把actions里方法映射到原地
        ...mapActions(['actions里的函数名'])
    }
}

AddItem直接用

  • 点击事件
  • dispatch触发action
<button @click="asyncAddFn">延迟1秒, 库存+5</button>

<script>
export default {
  methods: {
    asyncAddFn(){
      this.$store.dispatch('asyncAddCount', 5)
    }
  }
}
</script>

SubItem映射用

  • 点击事件
  • 映射actions的方法
  • 调用actions的方法传值
<button @click="asyncSubFn">延迟1秒, 库存-5</button>

<script>
// 需求3: 映射actions到方法里
// 1. 拿到辅助函数 mapActions
// 2. 在methods内, ...mapActions(['actions函数名'])
// 3. 当普通方法使用

import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(['asyncSubCount']),
    asyncSubFn(){
      this.asyncSubCount(5)
    }
  }
}
</script>

小结

  1. actions使用方式?

    方式1: this.$store.dispatch(‘actions方法名字’, 值)

    方式2: …mapActions([‘actions里的方法名’]) 映射到原地使用

  2. 视图组件, state, mutations, actions的关系是?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E8iGNqlf-1662081248274)(asset/action-state.png)]

10.vuex-重构购物车-准备Store

目标

  • 在现有项目如何集成vuex

store准备

  1. 复制预习资料<shopcar-模板>到自己今天文件夹下
  2. 下载vuex
  3. store/index.js创建导出store对象
  4. main.js把store引入, 然后注入到Vue实例

小结

  1. 现有项目如何集成vuex

    下载vuex

    创建store对象并注入到Vue实例中

11.vuex-重构购物车-配置项(上午结束)

目标

  • 准备state和mutations还有actions

配置项准备

  1. 定义state - 保存商品列表数组
state: {
    goodsList: [] // 列表
}
  1. 定义mutations - 给state里变量赋值
mutations: {
    setGoodsList(state, newList) {
        state.goodsList = newList
    }
}
  1. 定义actions - 异步请求数据提交给mutations
actions: {
    async asyncGetGoodsList(store) {
        const url = `https://www.escook.cn/api/cart`
        // 发送异步请求
        const res = await axios({ url: url });
        store.commit('setGoodsList', res.data.list) // 提交mutation修改state中的数据
    }
}

App.vue使用vuex

  • 把vuex商品数组映射回来使用
  • 网络请求调用actions方法
<script>
import { mapState, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState({list: 'goodsList'}) // 自定义原地属性名list, 映射vuex里的goodsList变量值
  },
  created(){
    this.asyncGetGoodsList()
  },
  methods: {
    ...mapActions(['asyncGetGoodsList']),
    allFn(bool){
      this.list.forEach(obj => obj.goods_state = bool)
    }
  }
}
</script>

小结

  1. mapState可以改变映射到原地的计算属性名吗?

    可以的, 格式…mapState({'‘计算属性名’, ‘state里要映射的变量名’})

12.vuex-getters定义-计算属性

目标

  • getters概念
  • 定义getters

getters概念

vuex身上的全局状态-计算属性, 类似于computed

getters 依赖于 state中原始数据的变化，并返回计算后的新数据

定义getters

在store/index.js定义getters

语法:

/*
const store = new Vuex.Store({
	getters: {
		计算属性名 (state) {
			return 值给计算属性
		}
	}
})
*/

具体代码

const store = new Vuex.Store({
    // ...省略其他
    getters: {
        allCount(state) {
            return state.goodsList.reduce((sum, obj) => {
                if (obj.goods_state === true) { // 选中商品才累加数量
                    sum += obj.goods_count;
                }
                return sum;
            }, 0)
        },
        allPrice(state) {
            return state.goodsList.reduce((sum, obj) => {
                if (obj.goods_state) {
                    sum += obj.goods_count * obj.goods_price
                }
                return sum;
            }, 0)
        }
    }
})

小结

  1. getters有什么用?

    vuex里的计算属性, 属于全局计算属性, 类似computed

13.vuex-getters使用

目标

  • 组件内使用getters

使用getters的2种方式

  • 方式1: 组件内 - 直接使用

    语法:

    this.$store.getters.计算属性名

  • 方式2: 组件内 - 映射使用

    语法:

    // 1. 拿到mapGetters辅助函数
import { mapGetters } from 'vuex'
export default {
	computed: {
        // 2. 把getters里属性映射到原地
      ...mapGetters(['getters里的计算属性名'])
    }   
}

MyFooter.vue里使用

  • 使用2种方式给计算属性值
<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    allCount(){
     return this.$store.getters.allCount;
    },
    ...mapGetters(['allPrice'])
  }
}
</script>

小结

  1. getters如何使用?

    方式1: this.$store.getters.计算属性名

    方式2: …mapGetters([‘getters里计算属性名’])

14.vuex-modules定义-分模块

目标

  • 为何要分模块
  • modules定义

为何分模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kUh6aftN-1662081248275)(images/image-20210326113544941.png)]

代码上的对比

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JBbPPUgH-1662081248275)(images/image-20210626234048113.png)]

创建modules模块对象

  • 新建store/modules/user.js
  • 新建store/modules/cart.js

语法: 对象里包含5个核心概念, 只有state变成函数形式

user.js - 用户模块对象

// 用户模块对象
const userModule = {
    state(){
        return {
            name: "",
            age: 0,
            sex: ''
        }
    },
    mutations: {},
    actions: {},
    getters: {}
}
export default userModule

cart.js - 购物车模块对象

// 购物车模块对象
import axios from 'axios'
const cartModule = {
    state() {
        return {
            goodsList: []
        }
    },
    mutations: {
        setGoodsList(state, newList) {
            state.goodsList = newList
        }
    },
    actions: {
        async asyncGetGoodsList(store) {
            const url = `https://www.escook.cn/api/cart`
            // 发送异步请求
            const res = await axios({ url: url });
            store.commit('setGoodsList', res.data.list) // 提交mutation修改state中的数据
        }
    },
    getters: {
        allCount(state) {
            return state.goodsList.reduce((sum, obj) => {
                if (obj.goods_state === true) { // 选中商品才累加数量
                    sum += obj.goods_count;
                }
                return sum;
            }, 0)
        },
        allPrice(state) {
            return state.goodsList.reduce((sum, obj) => {
                if (obj.goods_state) {
                    sum += obj.goods_count * obj.goods_price
                }
                return sum;
            }, 0)
        }
    }
}
export default cartModule

定义modules

语法:

modules: {
    模块名: 模块对象
}
  • 把2个模块对象, 引回到store里注册
import Vue from 'vue'
import Vuex from 'vuex'
import cartModule from './modules/cart'
import userModule from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
    modules: {
        user: userModule,
        cart: cartModule
    }
})
export default store

小结

  1. 为什么分模块?

    集中式管理项目过大, 变量过多, 会导致state臃肿, 难以维护

  2. 如何分模块?

    定义模块对象, state变成函数返回对象形式, 每个模块都有state/mutations/actions/getters/modules

  3. 根store如何注册?

    modules里 { 模块名: 模块对象 }

15.分模块-影响state取值方式

目的

  • 只要分模块, state取值方式改变, 其他暂时不变

state使用方式修改

  • 方式1: 组件内 - 直接使用

    原语法:

    this.$store.state.变量名

    分模块后语法:

    this.$store.state.模块名.变量名

  • 方式2: 组件内 - 映射使用

    原语法:

    ...mapState(['state里变量名'])
...mapState({'变量名': "state里变量名"}) // 给映射过来的state起别的名字

    分模块后语法:

    ...mapState({
    '变量名': state => state.模块名.变量名
})

App.vue-修改

computed: {
    // ...mapState({list: 'goodsList'}) // 本地属性名list, 映射vuex里的goodsList变量值
    // 方式1: 直接用
    // list(){ // 这个list就是组件内普通的计算属性名
    //     return this.$store.state.cart.goodsList 
    // }.
    // 方式2: 映射方式改变
    ...mapState({'list': state => state.cart.goodsList})
},

小结

  1. 分模块对什么有影响?

    对state的取值方式有影响, 对其他暂无影响

  2. state如何取值?

    在组件使用的时候, 要state.模块名.变量名

16.分模块-命名空间

目标

  • 防止多个模块之间, mutations/actions/getters的名字冲突

开启命名空间

在模块对象内设置namespaced: true

const moduleShopCar = {
    namespaced: true,
    state () {},
    mutations: {},
    actions: {},
    getters: {},
    modules: {}
}

state使用方式修改

  • 直接使用无变化: this.$store.state.模块名.变量名

  • 辅助函数需要遵守格式

    ...mapState("模块名", ['state变量名'])

mutations使用方式修改

  • 方式1: 组件内 - 直接使用

    • 原语法:

      this.$store.commit("mutations里的函数名", 具体值)

    • 开命名空间后语法:

      this.$store.commit("模块名/mutations里的函数名", 具体值)

  • 方式2: 组件内 - 映射使用

    • 原语法:

      ...mapMutations(['mutations里方法名'])

    • 开命名空间后语法:

      ...mapMutations("模块名", ['mutations里方法名'])

actions使用方式修改

  • 方式1: 组件内 - 直接使用

    • 原语法:

      this.$store.dispatch("actions里的函数名", 具体值)

    • 开命名空间后语法:

      this.$store.dispatch("模块名/actions里的函数名", 具体值)

  • 方式2: 组件内 - 映射使用

    • 原语法:

      ...mapActions(['actions里方法名'])

    • 开命名空间后语法:

      ...mapActions("模块名", ['actions里方法名'])

getters使用方式修改

  • 方式1: 组件内 - 直接使用

    • 原语法:

      this.$store.getters.计算属性名

    • 开命名空间后语法:

      this.$store.getters['模块名/计算属性名']

  • 方式2: 组件内 - 映射使用

    • 原语法:

      ...mapGetters(['getters里计算属性名'])

    • 开命名空间后语法:

      ...mapGetters("模块名", ['getters里计算属性名'])

小结

  1. state和mutations, 在根store和开启命名空间里的区别?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xdkBQKXq-1662081248275)(images/image-20210604084953510.png)]

  1. 整个vuex的体系是?

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nJ3YPnBh-1662081248275)(images/image-20210624225100101.png)]

扩展: 使用Devtools调试vuex数据

优秀的调试工具可以使我们写程序事半功倍，最后我们再学习一下如果使用dev-tools来调试vuex中的数据，这也是数据可预测特性里不可缺少的一环

目标

  • 掌握dev-tools调试vuex
  • 理解什么是数据状态是可追踪的

如何进行调试

注意只有vue+vuex的项目才可以用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zb4dL2cx-1662081248276)(asset/mutation1.png)]

调试信息说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BWfxpee9-1662081248276)(asset/mutation2.png)]

yxorg
关注
专栏目录
【Vue2.0】笔记（六）-Vue-cli、Vuex、mockjs、gitee、github
小女不才
04-08 2353
前端工程化（四）Vue脚手架(1) 基本用法1.1（五）Element-Ul的基本使用二级目录三级 （四）Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构。官网地址：https://cli.vuejs.org/zh/ (1) 基本用法 安装3.x版本的Vue脚手架： npm install -g @vue/cli 卸载命令：npm uninstall -g vue-cli 检查命令 Vu...
vue笔记黑马
04-08
vue所有笔记--黑马
Vuex从入门到实战笔记---黑马
faith_girl的博客
11-26 781
一、Vuex的概述 1.回顾–组件之间共享数据的方式 （仅适合在小范围内实现数据共享） 父向子传值：v-bind属性绑定 子向父传值：v-on 事件绑定 兄弟组件之间共享数据：EventBus $on:接收数据的那个组件 $emit:发送数据的那个组件 2.Vuex是什么 Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享 没有使用 Vuex时 想要实现数据的分享 需要将值传到附近的组件中 使用Vued时 实现数据共享 只需要将组件中的值传到store 其他组件可以从s
Vuex笔记
最新发布
m0_62475892的博客
04-10 215
vue自学笔记
VueX笔记
qq_45963655的博客
07-17 245
Vuex
vuex 笔记
齐枫的博客
05-26 304
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能 如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——...
黑马程序员 Vuex 笔记
weixin_43285205的博客
05-31 412
黑马程序员 Vuex 教程笔记，包括 vuex 的简介和基本使用方法。
Vuex 笔记 总结
qq_53836672的博客
08-31 190
### vuex #### ---State 状态 ...mapstate([]) ---> 1 组件访问 Stae中数据的第一种方式 this.$store.state.全局数据名称 ---> 2 组件访问 Stae中数据的第二种方式 (1)导入mapState函数 import {mapState} from 'vuex' (2)将导入的mapState 函数将组件需要的映入到组件的计算属性中 computed:{.
Vuex 笔记
学习笔记
11-25 673
vuex 笔记
Vuex笔记【1】
December_shi的博客
03-29 185
Vuex笔记 1、了解Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状 态，并以相应的规则保证状态以一种可预测的方式发生变化 1.1、使用Vuex管理数据的好处： 能够在 vuex 中集中管理共享的数据，便于开发和后期进行维护 能够高效的实现组件之间的数据共享，提高开发效率 存储在 vuex 中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新 1.2、传统组件传值方式及缺点： 传统通过输入输出的方式传值 props：输入 $e
Vuex笔记-Vuex的安装与导入
init_8y0的博客
03-28 552
文章目录前言一、安装流程1.安装vuex2.导入vuex二、使用步骤1.引入库2.读入数据总结 前言 Vuex的使用 一、安装流程 1.安装vuex npm install vuex --save 以learn_vuex项目为例 2.导入vuex 在/src下新建文件夹store，在store文件夹下新建index.js 在/store/index.js中 import Vue from 'vue' import Vuex from 'vuex' // 1.安装插件 Vue.use(Vuex)
vuex笔记详解以及关于辅助函数
前端程序猿的博客
12-23 252
vuex 五大要素以及对应的map辅助函数
Vuex笔记一小部分
weixin_45732235的博客
04-05 656
1、Vuex是做什么的？ 是一个专门为vue.js应用程序开发的状态管理模式 状态管理到底是什么？ 状态管理模式、集中式存储管理这些名词听起来很高大上，让人难以理解 其实，可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。 然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用 那么，多个组件是不是就可以共享这个对象中的所有变量属性了。 2、管理什么状态呢？ 有什么状态是需要我们在多个组件之间共享的呢？ 比如用户的登录状态、用户名称、头像、地理位置信息等等 比如商品的收藏、购物车中的物品
vuex学习笔记
icelove76的博客
10-07 282
学习vuex
删除数组对象中的某一项
yxorg的博客
04-26 3170
需求：按某要求删除数组对象中的特定某几项 代码实现： // 循环 如果小于5就删除 const arr = [1,2,3,4,5,6,7,8] for(let i = 0, len = arr.length; i < len; i++) { if(arr[i] < 5) { arr.splice(i, 1) } } 结果如下： [2, 4, 5, 6, 7, 8] 分析原因：删除操作会使得对应索引值位上的元素清空，整个数组中的元素向前移动一位，补位的元素会填充到执行删除操作的索引值
el-table-column设置fixed后，el-popover出现两个的解决办法。
yxorg的博客
11-17 2907
el-popover出现多个bug
解决js小数加减法精确度问题
yxorg的博客
04-18 2078
js浮点数计算时，出现多位小数的bug，下面是例子： 0.1+0.2 // 0.30000000000000004 0.3-0.2 // 0.09999999999999998 解决办法，封装两个通用方法，如下所示： //自定义加法运算 function addNum (num1, num2) { var r1, r2, m, floatNum; try { r1 = num1.toString().split(".")[1].length; } catch (e) { r1
arr.sort排序
yxorg的博客
09-24 1167
1.默认情况下根据字符编码（ascm值）进行排序 var arr = [1,3,6,2,10]arr.sort();//[1, 10, 2, 3, 6]2.sort排序允许接受一个参数（函数），这个函数接受2个形参a,b,并且通过冒泡的方式比较。返回值规则：当返回值为负数时，那么前面的数在前面，也就是不动当返回值为正数时，那么后面的数在前为0，不动升序 arr.sort(function(a,b){ if(a>b){ //返回正数 b就和a位置互换，小的在前面了
Vuex教程：构建一个笔记应用
"本文将通过构建一个笔记应用来讲解如何使用Vuex，介绍Vuex的基础概念，适用场景以及代码组织方式。Vuex是一个用于管理中大型单页应用状态的架构，帮助保持应用状态的可维护性和可理解性。文中会讨论Vuex的核心概念...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值