Vuex(一)Vuex基本使用-状态对象的获取
一、背景引言1、vuex是什么?vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。chrome安装调试工具 devtools2、单向数据流示意图说明:State:驱动应用的数据源(单向数据流)View:以声明方式将 state 映射到视图(静态显示出来的数据源)Ac...
·
一、背景引言
1、vuex是什么?
- vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
- chrome安装调试工具 devtools
2、单向数据流
-
示意图说明:
- State:驱动应用的数据源(单向数据流)
- View:以声明方式将 state 映射到视图(静态显示出来的数据源)
- Actions:处理用户在view上面操作而导致的状态变化(数据源变化追踪)
-
一个简单的demo案例:
<template>
<div>
<!-- view -->
<div>{{ count }}</div>
<button @click="increment">increment</button>
</div>
</template>
<script>
export default {
// state
data () {
return {
count: 0
}
},
// actions
methods: {
increment () {
this.count++
}
}
}
</script>
<style>
</style>
3、vuex解决的问题
- 多个视图组件,包括父子组件,兄弟组件之间的状态共享
- 不同视图组件的行为需要变更同一个状态
4、vuex使用场景
- 中大型单页应用,需要考虑如何更好地在组件外部管理状态,简单应用不建议使用
5、vuex与全局变量的区别
- 响应式:vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效更新
- 不能直接改变store:不能直接改变store的变化,改变store中状态的唯一途径是commit mutation,方便于跟踪每一个状态的变化
6、vuex核心流程
-
示意图说明:
Vue Components
:Vue组件。HTML页面上,负责接收用户操作等交互行为,执行dispatch方法触发对应action进行回应Dispatch
:操作行为触发方法,是唯一能执行action的方法Actions
:操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作,支持多个同名方法,按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行,包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装,以支持action的链式触发Commit
:状态改变提交操作方法。对mutation进行提交,是唯一能执行mutation的方法Mutations
:状态改变操作方法。是Vuex修改state的唯一推荐方法,其他修改方式在严格模式下将会报错。该方法只能进行同步操作,且方法名只能全局唯一。操作之中会有一些hook暴露出来,以进行state的监控等State
:页面状态管理容器对象。集中存储Vue components中data对象的零散数据,全局唯一,以进行统一的状态管理。页面显示所需的数据从该对象中进行读取,利用Vue的细粒度数据响应机制来进行高效的状态更新Getters
:state对象读取方法。图中没有单独列出该模块,应该被包含在了render中,Vue Components通过该方法读取全局state对象
7、总结说明
- Vue组件接收交互行为,调用dispatch方法触发action相关处理,若页面状态需要改变,则调用commit方法提交mutation修改state,通过getters获取到state新值,重新渲染Vue Components,界面随之更新
二、入门示例
1、安装
npm install vuex --save
2、简单示例
(1)src/vuex/store.js
中写入以下代码:
// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)
// 1、state:创建初始化状态
const state = {
// 放置初始状态
count: 1
}
// 2、mutations:创建改变状态的方法
const mutations = {
// 状态变更函数-一般大写
ADD (state, n) {
state.count += n;
}
}
// 3、getters:提供外部获取state
const getters = {
count: function(state){
return state.count;
}
}
// 4、actions:创建驱动方法改变mutations
const actions ={
// 触发mutations中相应的方法-一般小写
add ({commit}, data) {
commit('ADD', data)
}
}
// 5、全部注入Store中
const store = new Vuex.Store({
state,
mutations,
getters,
actions
});
// 6、输出store
export default store;
-
代码说明:
- state - mutations - getters - actions - store,以上写法基本固定。
- 小型项目用上面的简单管理状态即可。
(2)src/main.js
代码中
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入store
import store from './vuex/store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, // 全局注入
components: { App },
template: '<App/>'
})
(3)src/compontent/Count.vue
页面组件中代码如下:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>{{count}}</h2>
<button @click="clickAdd">新增</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Vuex test!'
}
},
computed: {
// 获取state值
count() {
return this.$store.state.count;
}
},
methods: {
clickAdd() {
//分发action中的add方法
this.$store.dispatch('add', 1);
}
}
}
</script>
<style scoped>
</style>
三、state-状态对象的获取方法
1、在组件的template
中直接使用
<h2>{{ $store.state.count }}</h2>
2、在计算属性computed
中直接赋值
// 方式1:直接获取
computed: {
count() {
// this指的是main.js中的vue实例对象
return this.$store.state.count;
}
}
3、通过mapState
的对象
来赋值
// 方式2:利用mapState
computed: mapState({
// es5写法
count: function (state) {
return state.count;
},
// es6写法
count: state => state.count
})
4、通过mapState
的数组
来赋值
// 方式3:数组获取
computed: mapState(['count'])
5、通过mapState
的JSON
来赋值
// 方式4:JSON获取
computed: mapState({
count: 'count'
})
- PS:一般4和5两种比较常用
6、完整示例代码
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>{{ $store.state.count }}</h2>
<h2>{{count}}</h2>
<button @click="clickAdd">新增</button>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
data () {
return {
msg: 'Vuex test!'
}
},
// 方式1:在计算属性computed中直接赋值
// computed: {
// count() {
// // this指的是main.js中的vue实例对象
// return this.$store.state.count;
// }
// },
// 方式2:通过mapState的对象来赋值
// computed: mapState({
// // es5
// // count: function (state) {
// // return state.count;
// // },
// // es6
// count: state => state.count
// }),
// 方式3:通过mapState的对象来赋值
// computed: mapState(['count']),
// 方式4:通过mapState的JSON来赋值
computed: mapState({
count: 'count'
}),
methods: {
clickAdd() {
//分发action中的add方法
this.$store.dispatch('add', 1);
}
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)