day0609

最新推荐文章于 2024-06-04 20:54:26 发布
最新推荐文章于 2024-06-04 20:54:26 发布
阅读量68 收藏
点赞数
分类专栏： qianfeng
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46008442/article/details/117736897
版权

day0609

Vuex

介绍

Vuex是什么？

在这里插入图片描述

什么是“状态管理模式”？

从一个简单的Vue计数应用开始：

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

状态管理模式

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

什么情况下我应该使用 Vuex？

在这里插入图片描述

安装
直接下载/CDN引用：

在这里插入图片描述

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
NPM：
npm install vuex --save
Yarn
yarn add vuex

在这里插入图片描述

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

在这里插入图片描述

Promise

在这里插入图片描述

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

在这里插入图片描述

npm install es6-promise --save # npm
yarn add es6-promise # Yarn

在这里插入图片描述

import 'es6-promise/auto'
自己构建

在这里插入图片描述

git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
npm install
npm run build
开始

在这里插入图片描述

在这里插入图片描述

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

在这里插入图片描述

store.commit('increment')

console.log(store.state.count) // -> 1

在这里插入图片描述

new Vue({
  el: '#app',
  store: store,
})

在这里插入图片描述

new Vue({
  el: '#app',
  store
})

在这里插入图片描述

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

在这里插入图片描述

核心概念

State

单一状态树

在这里插入图片描述

在Vue组件中获得Vuex状态

在这里插入图片描述

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

在这里插入图片描述

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

在这里插入图片描述

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
mapState辅助函数

在这里插入图片描述

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

在这里插入图片描述

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])
对象展开运算符

在这里插入图片描述

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}
组件仍然保有局部状态

在这里插入图片描述

Getters

柯里化

计算属性是可以传参的，官方文档没写

在这里插入图片描述

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

在这里插入图片描述

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})
通过属性访问

在这里插入图片描述

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

在这里插入图片描述

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

store.getters.doneTodosCount // -> 1

在这里插入图片描述

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

在这里插入图片描述

通过方法访问

在这里插入图片描述

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

在这里插入图片描述

mapGetters辅助函数

在这里插入图片描述

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

在这里插入图片描述

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

Mutations

mutation必须是同步函数，无副作用函数
（纯函数）

不能在Mutations里做异步操作

因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

从Vue Devtools里看
每次mutations都返回一个新值，异步则无法更新

面试

在这里插入图片描述

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

在这里插入图片描述

store.commit('increment')
提交载荷（Payload）

在这里插入图片描述

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)

在这里插入图片描述

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})
对象风格的提交方式

在这里插入图片描述

store.commit({
  type: 'increment',
  amount: 10
})

在这里插入图片描述

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
Mutation需遵守Vue的响应规则

在这里插入图片描述

state.obj = { ...state.obj, newProp: 123 }
使用常量代替Mutation事件类型

在这里插入图片描述

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

在这里插入图片描述

Mutation必须是同步函数

在这里插入图片描述

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

在这里插入图片描述

在组件中提交Mutation

在这里插入图片描述

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}
下一步：Action

在这里插入图片描述

store.commit('increment')
// 任何由 "increment" 导致的状态变更都应该在此刻完成。

在这里插入图片描述

Actions

同步且无模块时可以不用actions

异步的时候使用

企业级不要省略

属性求值加方括号[ ]?

在这里插入图片描述

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

在这里插入图片描述

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}
分发Action

在这里插入图片描述

store.dispatch('increment')

在这里插入图片描述

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

在这里插入图片描述

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

在这里插入图片描述

actions: {
  checkout ({ commit, state }, products) {
    // 把当前购物车的物品备份起来
    const savedCartItems = [...state.cart.added]
    // 发出结账请求，然后乐观地清空购物车
    commit(types.CHECKOUT_REQUEST)
    // 购物 API 接受一个成功回调和一个失败回调
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

在这里插入图片描述

在组件中分发Action

在这里插入图片描述

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}
组合Action

在这里插入图片描述

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

在这里插入图片描述

store.dispatch('actionA').then(() => {
  // ...
})

在这里插入图片描述

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

在这里插入图片描述

// 假设 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

在这里插入图片描述

Modules

在这里插入图片描述

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
模块的局部状态

在这里插入图片描述

const moduleA = {
  state: () => ({
    count: 0
  }),
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

在这里插入图片描述

const moduleA = {
  // ...
  actions: {
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

在这里插入图片描述

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}
命名空间

在这里插入图片描述

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,

      // 模块内容（module assets）
      state: () => ({ ... }), // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 嵌套模块
      modules: {
        // 继承父模块的命名空间
        myPage: {
          state: () => ({ ... }),
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 进一步嵌套命名空间
        posts: {
          namespaced: true,

          state: () => ({ ... }),
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

在这里插入图片描述

在这里插入图片描述

modules: {
  foo: {
    namespaced: true,

    getters: {
      // 在这个模块的 getter 中，`getters` 被局部化了
      // 你可以使用 getter 的第四个参数来调用 `rootGetters`
      someGetter (state, getters, rootState, rootGetters) {
        getters.someOtherGetter // -> 'foo/someOtherGetter'
        rootGetters.someOtherGetter // -> 'someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // 在这个模块中， dispatch 和 commit 也被局部化了
      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // -> 'foo/someGetter'
        rootGetters.someGetter // -> 'someGetter'

        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}

在这里插入图片描述

{
  actions: {
    someOtherAction ({dispatch}) {
      dispatch('someAction')
    }
  },
  modules: {
    foo: {
      namespaced: true,

      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... } // -> 'someAction'
        }
      }
    }
  }
}

在这里插入图片描述

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},
methods: {
  ...mapActions([
    'some/nested/module/foo', // -> this['some/nested/module/foo']()
    'some/nested/module/bar' // -> this['some/nested/module/bar']()
  ])
}

在这里插入图片描述

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

在这里插入图片描述

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

在这里插入图片描述

// 通过插件的参数对象得到空间名称
// 然后返回 Vuex 插件函数
export function createPlugin (options = {}) {
  return function (store) {
    // 把空间名字添加到插件模块的类型（type）中去
    const namespace = options.namespace || ''
    store.dispatch(namespace + 'pluginAction')
  }
}
模块动态注册

在这里插入图片描述

import Vuex from 'vuex'

const store = new Vuex.Store({ /* 选项 */ })

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

在这里插入图片描述

模块重用

在这里插入图片描述

const MyReusableModule = {
  state: () => ({
    foo: 'bar'
  }),
  // mutation, action 和 getter 等等...
}

ES6 find() 方法

pika521197
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Time of Day 3.2.0
07-06
Time of day 3.2.0.unitypackage Time of day 3.2.0.unitypackage
0day漏洞检测
04-13
利用FUZZING技术检测漏洞，检测Activex插件的漏洞学习。
day0609异常
qq_41204674的博客
06-09 68
异常
JavaSE学习(Day01_0609)
qq_41575860的博客
06-09 111
Day01 (2020.06.09) IDEA的使用 1. 基本设置 2. 新建一个类 知识回顾 1. 方法的定义 修饰符 返回值类型 方法名 （形参类型 参数名，形参类型 参数名....）{ 方法体； } ​ 方法定义在类中且不能嵌套使用！ 2. 方法的使用 ​ 方法签名：方法名 + 参数列表（唯一确定一个方法） 3. 数组的定义及赋值 例1： String names[]; //栈中定义变量 names = new String[5]; //堆中开辟空间 //赋值 names[0
pytorch学习day5
vimpirespider的博客
06-04 779
除了常见的损失函数之外，PyTorch还支持用户自定义损失函数，以适应特定的任务需求。通过定义自定义损失函数，用户可以根据具体情况设计特定的损失计算方式，从而更好地优化模型的训练效果。优化器在深度学习中扮演着关键的角色，它管理和更新模型中可学习参数的值，以使模型的输出更接近真实标签。在PyTorch中，优化器负责计算参数的梯度并更新参数值，实现模型的优化和训练。
JS基础0609
u011431995的博客
06-09 99
JS运算符 算术运算符 y=5，下面的表格解释了这些算术运算符： 运算符 描述 例子 x 运算结果 y 运算结果 实例 + 加法 x=y+2 7 5 实例 » - 减法 x=y-2 3 5 实例 » * 乘法 x=y*2 10 5 实例 » / 除法 x=y/2 2.5 5 实例 » % 取模（余数） x=y%2 1 5 实例 » ++ 自增 x=++y 6 6 实例 » x=y++ 5 6 实例 » – 自减 x=–y 4 4 实例 » x=y– 5
Daydream体验记录
cglover
07-11 256
daydream一体机是具备空间6dof空间定位的功能，配备一个3dof手柄 1 开箱体验 2 ID外观 3 软件体验
Python 学习日记day 2
CryBaby0609的博客
10-15 689
python
java 反射 报错_java反射，为什么报错呢？
weixin_33518565的博客
02-19 305
展开全部获取构造函数使32313133353236313431303231363533e59b9ee7ad9431333365663432用的是Class类对象，而不是你没反射之前的Object对象，getConstructors 是Class类的方法代码修改一下，改成下面的就不报错了importjava.lang.reflect.Constructor;publicclassfanshe2...
mysql创建数据库后出现Access denied for user 'root'@'%' to database ‘xxxx’
热门推荐
qq_27238185的博客
02-10 1万+
原文链接：http://szgaea.iteye.com/blog/1171488  create database test1;    创建完数据库后，通过远程连接提示 Access denied for user 'root'@'%' to database ‘xxxx’     原因：创建完数据库后，需要进行授权，（在本地访问一般不会存在这个问
Python学习日记Day3
CryBaby0609的博客
10-16 171
if语句
0day安全随书代码
08-08
0day安全是一个在信息安全领域非常重要的概念，它指的是那些尚未被公开、未被软件厂商修复的安全漏洞。这些漏洞被黑客利用来进行攻击，因为公众和软件供应商都对此一无所知，所以防御起来尤其困难。"0day安全随书...
代码随想录刷题打卡day02
04-18
代码随想录刷题打卡day02
day01课后总结.docx
11-23
day01课后总结.docx
MongoDB的Linux安装、基本操作、可视化、实验源码与报告文档
最新发布
07-10
MongoDB的Linux安装 在Linux上安装MongoDB，通常可以通过包管理器（如apt-get、yum等）或从MongoDB官网下载压缩包进行手动安装。以下是通过包管理器安装MongoDB的简要步骤（以Ubuntu为例）： 更新系统： 打开终端，使用sudo apt-get update命令更新系统包列表。 安装MongoDB： 使用sudo apt-get install -y mongodb命令安装MongoDB。这将自动处理依赖关系，并安装MongoDB服务器。 启动MongoDB服务： 安装完成后，可以使用sudo systemctl start mongod命令启动MongoDB服务。 验证安装： 使用mongo命令连接到MongoDB shell，如果能够成功连接并显示MongoDB的shell提示符，则表示MongoDB已成功安装并正在运行。 注意：以上步骤是基于Ubuntu系统的示例。对于其他Linux发行版，安装命令可能有所不同。此外，也可以从MongoDB官网下载.tgz压缩包进行手动安装，具体步骤包括下载、解压、配置环境变量、创建数据存储目录等。 M
数据质量管理（41页 PPT）.ppt
07-10
数据质量管理（41页 PPT）
宁波市建筑物矢量数据（Shp格式+带高度）.txt
07-09
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。
docker的配置与安装
07-10
你还在为安装docker发愁吗？ 你还在为找不到docker安装包而焦虑吗？ 你还在为找不到yum源而转而挠腮吗？ 你还在为安装docker仓库的不死不得其解吗？ 来吧，来我这里，一篇文章解决你的疑惑，释放你的压力，让你顿觉豁然开朗。 我不是谁的救世主， 但我能让你在安装docker的道路上节省那么点儿时间、少走那么点儿弯路！ 如果你正在安装docker,来我这里看看。
day.replace
02-28
day.replace() 是 Python 中的一个字符串方法，用于替换字符串中的子串。它接受两个参数，第一个参数是要被替换的子串，第二个参数是替换后的新子串。 例如，我们有一个字符串 "Today is a sunny day."，我们想把...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值