Vuex 状态管理插件学习

Vue 状态管理插件学习

  • vuex vue 提供的数据状态管理插件(俗称数据共享中心)

  • state(数据商店也就是数据仓库),mutations(定义更改数据的方法)

  • 获取仓库中定义值的方法

1
2
3
4
5
6
7
// {{$store.state.定义的属性}}
// 使用计算属性
computed:{
count(){
return this.$store.state.定义的属性
}
}
  • 3.使用 vuex 中的 mapState,也就是 vuex 中提供给我们的方法
1
2
3
4
//es6写法
computed: mapState({
count: state => state.count
})
  • 等同于
1
2
3
4
5
computed: mapState({
count: state => {
return state.count
}
})
  • 4.mapState 扩展使用
1
2
computed: mapState(['在state中定义的属性'])
// 这个会根据你定义的属性名绑定到vue实例上
  • 5.mutations 提交更改仓库中定义值的方法(修改状态)
  • 使用$store.commit(‘调用定义在 mutations 中定义的方法名’,要传递给调用方法的参数)
  • 获取状态管理器中定义的方法(mutations)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const mutations = {
// 定义一个加的方法
add(state) {
state.count++
},
// 定义一个减的方法
reduce(state) {
state.count--
}
}
// 调用方法
// 在vue中使用import导入辅助函数
import { mapState, mapMutations } from 'vuex'

methods: mapMutations(['add', 'reduce'])
// 或
methods: mapMutations([(countAdd: 'add'), (countReauce: 'reduce')])
  • 6.vuex 中的计算属性(过滤属性)getters
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 定义方法
const getters = {
count:function(state){
return state.count += 100;
}
// 或者
count: state => { return state.count += 100 }
}

// 调用方法
import { mapState,mapMutations,mapGetters } from 'vuex';

computed: mapGetters({
count: (state) => { return state.count }
})
  • 7.vuex 中的 actions,异步提交方式
1
2
3
4
5
6
7
8
9
10
const actions = {
// context:上下文对象,这里你可以理解称store本身。
addAction(context) {
context.commit('add', 10)
},
// {commit}:直接把commit对象传递过来,可以让方法体逻辑和代码更清晰明了。
reduceAction({ commit }) {
commit('reduce')
}
}
  • 8.module 模块组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 定义模块,和定义一个store实例一样只不过把封装store的全部方法和属性,又封装在了一个模块中
const moduleA={
state,
mutations,
getters,
actions
}
// 调用方法
modules: {
//模块别名:模块名,记得要使用import引入模块
a:moduleA
}

//使用模块值和方法
和以上的使用方法一样,只不过前边加一个模块别名
坚持原创技术分享,您的支持将鼓励我继续创作!
  • 本文作者: Mark
  • 本文链接: https://js-mark.com/Vue/Vuex/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!

欢迎关注我的其它发布渠道