vuex中各属性的使用

vuex

状态管理模式
state：共享数据源；
mutations：修改数据（state中的数据）；
actions：异步请求；
getters：对共享数据进行包装（类似计算属性）；
modules: 模块化

代码

vuex代码

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {count: 0,arr: [1, 3, 6, 7, 4, 10]},mutations: {addCount(state, payload) {state.count += payload}},actions: {asyncAddCount(context, payload) {setTimeout(() => {context.commit('addCount', payload)}, 2000)}},getters: {getterCount: state => state.arr.filter(item => item > 5),// 快捷访问token: state => state.user.token,name: state => state.settings.name},modules: {// ! 命名空间user: {namespaced: true,state: {token: 11111},mutations: {changeToken(state, payload) {state.token = payload}}},settings: {state: {name: '标题'}}}
})

vue组件中使用方式

<template><div id="app"><!-- #1 state  --><!-- 方式一 $store.state.count --><h4>{{ $store.state.count }}</h4><!-- 方式二 mapState(['count']) --><h4>{{ count }}</h4><!-- #2 getters  --><!-- 方式一 $store.getters.getterCount --><h4>getter:{{ $store.getters.getterCount }}</h4><!-- 方式二 mapGetters(['getterCount']) --><h4>getter:{{ getterCount }}</h4><!-- #3 mutations --><!-- 方式一 mapMutations(['addCount']) --><div><button @click="addCount(1)">+1</button></div><!-- 方式二 $store.commit('addCount', 100)--><div><button @click="$store.commit('addCount', 100)">+100</button></div><!-- #4 actions --><!-- 方式一 $store.dispatch('asyncAddCount', 2) --><div><button @click="$store.dispatch('asyncAddCount', 2)">async+2</button></div><!-- 方式二 mapActions(['asyncAddCount']) --><div><button @click="asyncAddCount(10)">async+10</button></div><!-- #5 modules 模块化 --><!-- state --><h4>{{ $store.state.user.token }}</h4><h4>{{ $store.state.settings.name }}</h4><h4>{{ token }}</h4><h4>{{ name }}</h4><!-- 采用 namespaced 后的模块调用mutations或actions的方式 --><!-- 方式一 createNamespacedHelpers --><div><button @click="changeToken(10)">修改user的token 1</button></div><!-- 方式二 $store.commit('user/changeToken', 233) --><div><button @click="$store.commit('user/changeToken', 233)">修改user的token 2</button></div><!-- 方式三 mapMutations(['user/changeToken']) --><div><button @click="changeT(2233)">修改user的token 3</button></div></div>
</template><script>
import {mapState,mapMutations,mapActions,mapGetters,createNamespacedHelpers
} from 'vuex'
const { mapMutations: userMapMutations } = createNamespacedHelpers('user')
export default {name: 'App',computed: {...mapState(['count']),...mapGetters(['getterCount', 'name', 'token'])},methods: {...mapMutations(['addCount', 'user/changeToken']),...mapActions(['asyncAddCount']),...userMapMutations(['changeToken']),changeT(val) {this['user/changeToken'](val)}}
}
</script>

vuex中各属性的使用相关推荐

vue 组件属性监听_详解vuex 中的 state 在组件中如何监听
前言不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就 ...
Vuex中的mutations属性详解
一.mutations属性介绍是唯一一种方式来修改state中的状态的:在组件的自定义方法中,使用this.$store.commit('对应mutations中的方法', 新的值)方法,把新的值提 ...
Vuex中的state属性详解
一.state属性介绍 state属性是Vuex中用于存放组件之间共享的数据:也就是说,我们把一些组件之间共享的状态主要存放在state属性中:它采用的是单一状态树--用一个对象就包含了全部的应用层级 ...
vuex结合php,vuex中store的使用介绍（附实例）
本篇文章给大家带来的内容是关于vuex中store的使用介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.状态管理(vuex)简介 vuex是专为vue.js应用程序 ...
vuex中store 的mutation
vuex中store 的mutation 1.mutation 官方解释mutation: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.Vuex 中的 mutation ...
vuex中的getters
vuex中的getters vuex中的getters与vue中的computed计算属性十分相似,在vuex中的Store仓库里,state就是用来存放数据,而getters类似于computed计 ...
VUEX中关于 mapActions, mapMutations使用解析
在项目中,经常使用到VUEX状态管理,对于小项目中,直接使用 this.$store.commit('mutaion-name','参数') 或者 this.$store.dispatch('acti ...
Vuex中的核心方法
Vuex中的核心方法 Vuex是一个专为Vue.js应用程序开发的状态管理模式,其采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.每一个Vuex应用的核心就是 ...
vue提交mutation_为什么Vuex中必须要通过commit提交mutation？
为什么不能直接调用mutation方法,而是必须得通过commit来提交mutation呢? 谢邀! 网上也有很多人问这个问题.但是这个问题要问作者为什么这么设计? 官方解释道: 更改 Vuex 的 ...

vuex中各属性的使用

vuex

代码

vuex中各属性的使用相关推荐

最新文章

热门文章