vuex数据管理核心的几个状态和属性是State、Mutation、Getter、Action、Module
一、初始步骤
1.通过npm下载vuex
npm n install vuex --save
2.创建vuex文件夹和store.js文件
文件目录
3.
vuex/store.js文件中引入vuex
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
通过这三步的操作，vuex就算引用成功了
二、State访问状态对象
1.在store.js文件中增加一个常量对象
const state={
count:1
}
export default 封装导出代码，让外部可以可以使用
export default new Vuex.Store({
state
})
2.访问State状态对象方式
- 通过computed的计算属性直接赋值
computed:{
// computed的计算属性直接赋值
count(){
return this.$store.state.count;
}
}
- 通过mapState的对象来赋值
computed:{
// computed的计算属性直接赋值
// count(){
// return this.$store.state.count;
// }
// 通过mapState的对象来赋值
...mapState({
count:state=>state.count
})
},
- 通过mapState的数组来赋值
computed:{
...mapState(['count'])
}
三、Mutations修改状态
- 在
store.js文件中定义mutations并设置add和reduce两个修改状态的方法
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
// 状态对象
const state = {
count:1
}
// 修改状态
const mutations={
add(state){
state.count++;
},
reduce(state){
state.count--;
}
}
export default new Vuex.Store({
state,
mutations
})
- 创建一个vuexdemo.vue的文件
<template>
<div>
vuexdemo中的数据：{{count}}
<div>
<button @click="addClick">点击+</button>
<button @click="reduceClick">点击-</button>
</div>
</div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
export default{
data(){
return{
}
},
computed:{
// computed的计算属性直接赋值
// count(){
// return this.$store.state.count;
// }
// 通过mapState的对象来赋值
// ...mapState({
// count:state=>state.count
// })
// 通过mapState的数组来赋值
...mapState(['count'])
},
methods:{
...mapMutations(['add','reduce']),
addClick(){
// 方法一
// this.add()
// 方法二
this.$store.commit('add')
},
reduceClick(){
this.$store.commit('reduce')
}
}
}
</script>
点击修改数据
- 当我们项目庞大的时候，
mutations维护起来有可能比较麻烦，可以采用新建mutations_types.js文件，将方法名定义在文件中统一管理。
export const add = 'add' // 加
export const reduce = 'reduce' // 减
- 使用也需要简单修改一下，在当前的store.js文件中
import * as METHOD_TYPE from './mutations_types.js'
// 修改状态
const mutations={
[METHOD_TYPE.add](state,n){
state.count = n;
},
[METHOD_TYPE.reduce](state){
state.count--;
}
}
四、getter 计算过滤操作
- 在
store.js中加入getters
// 计算过滤操作，这里对数据进行操作
const getters = {
count:function(state){
return state.count +=100;
}
}
// 在Vuex.Store()里引入 上面定义的属性
export default new Vuex.Store({
state,
mutations,
getters
})
页面引入使用
import {mapState,mapMutations,mapGetters} from 'vuex'
computed:{
// computed的计算属性直接赋值
// count(){
// return this.$store.state.count;
// }
// 通过mapState的对象来赋值
// ...mapState({
// count:state=>state.count
// })
// 通过mapState的数组来赋值
...mapState(['count']),
...mapGetters(["count"]) //每次操作count都会相加100
}
五、actions异步修改状态
actions和Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。
在store.js文件中继续写入
// 异步修改
//在actions里写了两个方法addAction和reduceAction，
//在方法体里，我们都用commit调用了Mutations里边的方法
/*
*这里用了两种方法调用
*context：上下文对象，这里你可以理解称store本身。
*{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。
*/
const actions ={
addAction(context){
context.commit('add',10)
},
reduceAction({commit}){
commit('reduce')
}
}
// 在Vuex.Store()里引入 上面定义的属性
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
六、module模块组
- 随着项目的越来越大，状态管理这块就需要我们分模块来管理，分组后再进行按组编写，也为后期我们可以更好的维护。
在/vuex/store.js中进行模块声明，同时对Vuex.Store()里面进行修写
//声明模块组
const moduleA = {
state,
mutations,
getters,
actions
}
// 在Vuex.Store()里引入 上面定义的属性
export default new Vuex.Store({
modules:{a:moduleA}
})
- 页面使用
computed:{
//用法一：computed的计算属性直接赋值
// count(){
// return this.$store.state.a.count;
// }
//用法二：通过mapState的对象来赋值
...mapState({
count:state=>state.a.count
})
//用法三：通过mapState的数组来赋值
// ...mapState(['count']),
// ...mapGetters(["count"]) //每次操作count都会相加100
},
—— 谨以此记录自己学习的轨迹，沉淀积累知识的笔记。——
网友评论