谈一谈Vuex

nifhlheimr 发布于2019-08-23 18:01 / 3775人阅读

摘要：是什么官方文档说道是一个专为应用程序开发的状态管理模式。触发之别名篇触发之对象展开运算符篇触发之对象展开运算符别名篇先引用官方文档的说法类似于，不同在于提交的是，而不是直接变更状态。

Vuex是什么

官方文档说道：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

什么是状态管理模式

state，驱动应用的数据源；

view，以声明方式将 state 映射到视图；

actions，响应在 view 上的用户输入导致的状态变化。

Mutation 触发之 mapMutations 别名篇

Mutation 触发之对象展开运算符篇

Mutation 触发之对象展开运算符别名篇

Action

先引用官方文档的说法

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。

实现上是没问题，action 调用 mutation，但关于异步要放到 action 的说法，个人观点是没有这个必要，在 mutation 的小结中有说到过，mutation 只做同步也不是制性的

在使用 Action 前先与 Mutation 做个小结

action 并不是必须的，项目中完全可以不需要 action

异步操作可放 mutation 和 action，只要开发时方便，都没有影响

关于官方说 action 异步，mutation 同步的说法只是为了能用 devtools 追踪状态变化。

action 中的方法和 mutation 一样，最多只有两个形参，第一个为 context，可以理解为 store，第二个为手动传的参数

action 用 commit() 来触发 mutation

view 层通过 store.dispath 来分发 action

简单使用

在 action

store.js

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

let state = {
    count: 0
}

let getters = {
    total: (state) => (symbol) => {
        return (symbol || "$") + state.count;
    }
}

let mutations = {
    increment(_state, n){
        console.log(arguments)
        _state.count += n || 1;
    },
    decrement(){
        state.count -= 1;
    }
}

let actions = {
    increment(context, n){
        context.commit("increment", n)
    }
}

const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

export default store

分发 action

mapActions

和 mutation 的使用方法基本一样

methods: {
    ...mapActions(["increment"]),
    ...mapActions({add: "increment"})
}

Module

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 的状态

GPU云服务器云服务器谈一谈一次 Vuex vuex cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104522.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
谈一谈javascript面向对象

摘要：从今天起我们开始讨论的面向对象面向对象概念理解面向对象语言有个标志它们都具有类的概念，通过类可以创建任意多个具有相同属性和方法的对象。从今天起我们开始讨论javascript的面向对象面向对象概念理解面向对象语言有个标志=>它们都具有类的概念，通过类可以创建任意多个具有相同属性和方法的对象。面向对象有三大特性封装继承多态但JS中对象与纯面向对象语言中的对象是不同的 J...

PiscesYE 2019-08-23 14:04 评论0 收藏0
谈一谈javascript异步

摘要：从今天开始研究一下的异步相关内容，感兴趣的请关注同期异步系列文章推荐异步中的回调异步与异步之异步之异步之和异步之一异步之二异步实战异步总结归档什么是异步我们知道的单线程的，这与它的用途有关。从今天开始研究一下javascript的异步相关内容，感兴趣的请关注同期异步系列文章推荐javascript异步中的回调javascript异步与promisejavascript异步之Prom...

Sourcelink 2019-08-23 14:37 评论0 收藏0