vuex默认的五种基本的对象

 

https://www.cnblogs.com/chinabin1993/p/9848720.html

1. 每一个 Vuex 项目的核心就是 store(仓库)。store 就是一个对象,它包含着你的项目中大部分的状态
(state)。
2. state 是 store 对象中的一个选项,是 Vuex 管理的状态对象(共享的数据属性)

 

 1.在store的mutations选项中定义方法,才可以改变状态值。
2. 在通过 $store.commit('mutationName') 触发状态值的改变

 

不同组件共享状态值

你可以向 $store.commit 传入额外的参数,即 mutation 的 载荷(payload):

Action 提交的是 mutation,而不是在组件中直接变更状态, 通过它间接更新 state。
在组件中通过 this.$store.dispatch('actionName') 触发状态值间接改变
Action 也支持载荷
Action 可以包含任意异步操作。

store = new Vuex.Store({ // 注意V 和 S都是大写字母
// 存放状态(共享属性)
state: {
count: 1
},
// 改变 state 状态
mutations: {
increment(state, n) { // n 为载荷
// state.count ++
state.count += n
},
decrement(state) {
state.count --
}
},
actions: {
add(context, n) {
// 触发 mutations 中的 increment 改变 state
context.commit('increment', n)
},
decrement({commit, state}) { // 按需传值
commit('decrement')
}
}
})

 修改views\Home.vue, 触发 action 改变值

<script>
export default {
methods: {
addCount() {
// 获取状态值
console.log(this.$store.state.count)
// 通过commit 调用 mutations 中的 increment 改变状态值
// this.$store.commit('increment')
// this.$store.commit('increment', 10) // 提交载荷
// 触发 actions 中的 add 改变状态值
this.$store.dispatch('add', 10)
},
decrement(){
// this.$store.commit('decrement')
this.$store.dispatch('decrement')
}
},
}
</script>

派生属性 getter

有时候我们需要从 store 中的 state 中派生出一些状态。
例如:基于上面代码,增加一个 desc 属性,当 count 值小于 50,则 desc 值为 吃饭; 大于等于 50 小于
100,则desc 值为 睡觉; 大于100 , 则 desc 值为打豆豆 。这时我们就需要用到 getter 为我们解决。
getter 其实就类似于计算属性(get)的对象

组件中读取 $store.getters.xxx

注意:getters 中接受 state 作为其第一个参数,也可以接受其他 getter 作为第二个参数

const store = new Vuex.Store({ // 注意V 和 S都是大写字母
。。。
//派生属性
getters: {
desc(state) {
if(state.count < 50) {
return '吃饭'
}else if(state.count < 100) {
return '睡觉'
}else {
return '打豆豆'
}
}
}
})

2. 修改 views\Home.vue, 显示派生属性的值

<template>
<div>
count: {{ $store.state.count }}
<button @click="addCount">加法</button>
<button @click="decrement">减法</button>
派生属性desc: {{ $store.getters.desc }}
</div>
</template>

24.3 Module模块化项目结构

24.3.1 Module
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。
当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。
每个模块拥有自己的 state、mutation、action、getter 等,参见以下代码模型

const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

如果所有的状态都写在一个 js 中,这个 js 必定会很臃肿,Vuex 并不限制你的代码结构。但是它建议你按以下代码
结构来构建项目结构: 

├── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store
   ├── index.js # 我们组装模块并导出 store 的地方
   ├── actions.js # 根级别的 action
  ├── mutations.js # 根级别的 mutation
  └── modules
     ├── cart.js # 购物车模块
     └── products.js # 产品模块

在 store下创建 modules 目录,该目录下创建 home.js

const state = {
count: 1
}
const getters ={
desc(state) {
if(state.count < 50) {
return '吃饭'
}else if(state.count < 100) {
return '睡觉'
}else {
return '打豆豆'
}
}
}
const mutations = {
increment(state, n) { // n 为载荷
// state.count ++
state.count += n
},
decrement(state) {
state.count --
}
}
const actions = {
add(context) {
// 触发 mutations 中的 increment 改变 state
context.commit('increment', 10)
},
decrement({commit, state}) { // 按需传值
commit('decrement')
}
}
export default {
// 存放状态(共享属性)
state,
//派生属性
getters,
// 改变 state 状态
mutations,
actions
}

https://www.cnblogs.com/chinabin1993/p/9848720.html

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值