vuex官方网站

vuex初级：

export default {// 组件间公共数据部分state: {},// 需要改变state中的数据时，要在mutation⾥定义改变的⽅法mutations: {},// 当改变state中的数据是异步操作时，在action⾥定义actions: {}
}

State
数据，存放⼀些公⽤部分的数据
Mutations
数据怎么改变，定义改变state的⼀些⽅法，同步
Actions
异步改变，如果需要异步改变state，则在这书写

Parent.vue

<template><div><h1>Parent</h1><m-child msg="from Parent msg" @showMsg="showMsg" ref="child" v-bind="$attrs"></m-child><h3>{{ msg }}</h3><h5>vuex<span style="color: red">{{ count }}</span></h5><button @click="add"></button></div>
</template><script>
import MChild from './Child'
import {mapState} from 'vuex'export default {// computed:{//   count(){//     return this.$store.state.count//   }// },computed: {...mapState({count: 'count',})//对象展开运算符},data() {return {msg: ''}},components: {MChild},methods: {showMsg(val) {this.msg = val},add() {this.$store.commit()this.$store.dispatch('delayAdd')}},mounted() {console.log(this.$children[0].msg)console.log('ref', this.$refs.child)}
}
</script><style scoped></style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({state:{"count": 0},mutations:{add(state){state.count++},decrease(state){state.count--}},actions:{delayAdd(context){setTimeout(()=>{context.commit('add')},1000)}}
})

文件结构：

vuex高级

vuex中的计算属性—Getters
当你需要依赖vuex⾥的state中的数据，做进⼀步处理时使⽤

state: {count: 0,
},
// 根据state中的count进⼀步处理，计算双倍值
getters: {doubleCount (state) {return state.count * 2}
},

模块化概念—Modules
当vuex⾥的数据⼗分庞⼤时，可根据存放的数据所属模块进⾏划分

import Vue from 'vue'
import Vuex from 'vuex'
// 第⼀步 引⼊模块
import text from './text'
Vue.use(Vuex)
// 第⼆步 在初始化store时，加载模块
export default new Vuex.Store({modules: {text}
})

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`'s state
store.state.b // -> `moduleB`'s state

Inside a module’s mutations and getters, the first argument received will be the module’s local state.

const moduleA = {state: () => ({count: 0}),mutations: {increment (state) {// `state` is the local module statestate.count++}},getters: {doubleCount (state) {return state.count * 2}}
}

vue项目原理分析-3：vuex相关推荐

vue项目原理分析-1：组件间传值
整个项目目录(create project后) vue.config.js的配置 // vue.config.js 常⽤配置 module.exports = {devServer:{port:333 ...
vue项目原理分析-2：路由
路由的基本配置基本参数 path 路由的访问路径.即url component 访问路径对应的组件扩展参数 name 路由指定命名,设置后可⽤params传参及使⽤name进⾏路由跳转路由的跳转 ...
vue 项目级别工程搭建-vuex的status，vue选中数据（七）
官网:https://vuex.vuejs.org/zh/ Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则 ...
Vue Router 原理分析与实现
陈丹青:看过的东西走过的路,还有你所经历的一切,都会经历一个开眼界的过程. 但眼界开了并不是一件好事情,反而顿悟之后从此你就会知道,你在社会之中是完全没有位置可言的.我算个屁,什么事都有人做过,都有人 ...
[Vue源码分析]自定义事件原理及事件总线的实现
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: 我们都知道Vue中父组件可以通过 props 向下传数据给子组件:子组件可以通过向$emit触发一个事件,在父组件中执行回调函数,从而实 ...
vue项目中,接手别人代码的，如何去分析？
首先拿到别人的代码的时候去分析以下几个事情.这里使用VUE项目举例, 一.首先观察package.json 看看是否是脚手架搭建,以及跑项目命令.分析是脚手架几 2 ? 3 ?4? npm run d ...
vue项目在IE中显示空白，报错：vuex requires a Promise polyfill in this browser
问题描述 vue项目在非IE内核的浏览器中显示正常,在IE内核浏览器中报错,并显示空白.报错如下: SCRIPT5022: [vuex] vuex requires a Promise polyfi ...
vue双向数据绑定原理分析--Mr.Ember
vue双向数据绑定原理分析摘要 vue常用,但原理常常不理解,下面我们来具体分析下vue的双向数据绑定原理. (1)创建一个vue对象,实现一个数据监听器observer,对所有数据对象属性进行监听 ...
浅谈:Spring Boot原理分析,切换内置web服务器,SpringBoot监听项目(使用springboot-admin),将springboot的项目打成war包
浅谈:Spring Boot原理分析(更多细节解释在代码注释中) 通过@EnableAutoConfiguration注解加载Springboot内置的自动初始化类(加载什么类是配置在spring.f ...

vue项目原理分析-3：vuex

vuex初级：

Parent.vue

store.js

vuex高级

vue项目原理分析-3：vuex相关推荐

最新文章

热门文章