Vue--- VueX基础 （Vuex结构图数据流向）1.1
2024-09-23 22:48:10
Vuex基础
https://vuex.vuejs.org/zh-cn
state --> view --> action -> state
多组件共享状态， 之前操作方式，由父组件传递到各个子组件。 当路由等加入后，会变得复杂。 引入viewx 解决共享问题。
原vue结构图
vuex结构图
Vuex对象结构 （state，mutations，getters，actions）
state 对象数据
mutations 操作变更state数据
getters 计算state
actions 触发mutations
★学习之后分析数据流向图★
安装
npm install --save vuex
调试
目标
代码1 ：原vue实现计数器
app.uve
<template>
<div>
<p>点击次数{{count}}， 奇偶数:{{eventOrOdd}}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">奇数加</button>
<button @click="incrementAsync">异步加</button>
</div>
</template> <script>
export default {
data () {
return {
count: 0
}
},
computed: {
eventOrOdd () {
return this.count % 2 === 0 ? '偶数' : '奇数'
}
},
methods: {
increment () {
const count = this.count
this.count = count + 1
},
decrement () {
const count = this.count
this.count = count - 1
},
incrementIfOdd () {
const count = this.count
if (count % 2 === 1) {
this.count = count + 1
}
},
incrementAsync () {
setTimeout(() => {
const count = this.count
this.count = count + 1
}, 1000)
}
}
}
</script> <style> </style>
代码2： VUEX实现
store.js
/**
* Created by infaa on 2018/9/22.
*/
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) const state = { // 初始化状态
count: 0
}
const mutations = {
INCREMENT (state) {
state.count++
},
DECREMENT (state) {
state.count--
}
} const actions = {
increment ({commit}) {
commit('INCREMENT')
},
decrement ({commit}) {
commit('DECREMENT')
},
incrementIfOdd ({commit, state}) {
if (state.count%2 === 1) {
commit('INCREMENT')
}
},
incrementAsync ({commit}) {
setTimeout( () => {
commit('INCREMENT')
}, 1000)
}
} const getters = {
eventOrOdd (state) {
return state.count % 2 === 0 ? '偶数' : '奇数'
}
} export default new Vuex.Store({
state, // 状态对象
mutations, // 更新state函数的对象
actions,// dispatch 对应actiong
getters // 对应computed 中getters
})
main.js
/**
* Created by infaa on 2018/9/19.
*/
import Vue from 'vue'
import App from './App'
import store from './store' /* eslint-disable no-new */ new Vue({
el: '#app',
components: {App},
template: '<App/>',
store // 所有组件对象多了一个属性$store
})
app.vue
<template>
<div>
<!--<p>点击次数{{count}}， 奇偶数:{{eventOrOdd}}</p>-->
<p>点击次数{{$store.state.count}}， 奇偶数:{{eventOrOdd}}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">奇数加</button>
<button @click="incrementAsync">异步加</button>
</div>
</template> <script>
export default {
// data () {
// return {
// count: 0
// }
// },
computed: {
eventOrOdd () {
// return this.count % 2 === 0 ? '偶数' : '奇数'
return this.$store.getters.eventOrOdd // js中要写this，模版中不用直接写$store
}
},
methods: {
increment () {
this.$store.dispatch('increment')
},
decrement () {
// const count = this.count
// this.count = count - 1
this.$store.dispatch('decrement')
},
incrementIfOdd () {
this.$store.dispatch('incrementIfOdd')
// const count = this.count
// if (count % 2 === 1) {
// this.count = count + 1
// }
},
incrementAsync () {
this.$store.dispatch('incrementAsync')
// setTimeout(() => {
// const count = this.count
// this.count = count + 1
// }, 1000)
}
}
}
</script> <style> </style>
代码3 优化app.js
app.uve 如果对应名不同，由[ ] 改为｛｝即可
<template>
<div>
<!-- <h2>点击的个数:{{count}}</h2> -->
<!-- <h3>{{eventOrOdd}}</h3> -->
<!-- Vuex 版本 -->
<h2>点击次数{{$store.state.count}}， 奇偶数:{{eventOrOdd}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">奇数+</button>
<button @click="incrementAsync">异步加</button>
</div>
</template> <script type="text/ecmascript-6">
import {mapState, mapGetters, mapActions} from 'vuex'
// export default{
// data(){
// return{
// count:0
// }
// },
// computed:{
// eventOrOdd(count){
// // return this.count % 2 === 0?'偶数':'奇数'
// return this.$store.getters.eventOrOdd
// } // },
// methods:{
// increment () {
// // const count = this.count;
// // this.count = count+1 // this.$store.dispatch('increment')
// },
// decrement (){
// // const count = this.count;
// // this.count = count -1
// this.$store.dispatch('decrement')
// },
// incrementIfOdd () {
// // const count = this.count;
// // if(count % 2 === 1 ){
// // this.count = count + 1
// // }
// this.$store.dispatch('incrementIfOdd');
// },
// incrementAsync () {
// // setTimeout(() => {
// // const count = this.count
// // this.count = count + 1
// // }, 1000)
// this.$store.dispatch('incrementAsync')
// }
// }
// };
// 优化 App.vue 代码格式
export default{
computed:{
...mapState['count'],
...mapGetters['eventOrOdd']
},
methods:{
...mapActions(['increment','decrement','incrementIfOdd','incrementAsync'])
}
}; </script> <style type="stylus" rel="stylesheet/stylus"> </style>
官方另一个案例购物车， store以目录结构呈现
https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
最新文章
- js,jquery,css,html5特效
- select 相关
- C#遍历指定文件夹中的所有文件和子文件夹
- JavaScript中sort方法的一个坑（leetcode 179. Largest Number）
- EditPlus怎样自动换行
- /MD, /MT, /LD (Use Run-Time Library)
- C语言实现二叉树-02版
- Linux就这个范儿 第8章 我是Makefile
- typings的理解
- eclipse工程设置的问题
- C# 获取配置文件节点值
- CodeForces 700B Connecting Universities
- mysql、mysqli、pdo使用
- 阿里java开发手册中命名规约解读之DO/BO/DTO/VO/AO
- Leetcode_190_Reverse Bits
- Node笔记一
- DevExpress WinForms使用教程：皮肤颜色和LookAndFeel
- 物联网架构成长之路(24)-Docker练习之Compose容器编排
- 项目实战SportsStore——订单处理模块
- HBuilder：一个不错的web前端IDE(代码编辑器)