vuex默认的五种基本的对象

左手的ㄟ右手 2023-05-31 04:57 4阅读 0赞

[https://www.cnblogs.com/chinabin1993/p/9848720.html][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）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70 1][]

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 改变值

派生属性 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][https_www.cnblogs.com_chinabin1993_p_9848720.html]

[https_www.cnblogs.com_chinabin1993_p_9848720.html]: https://www.cnblogs.com/chinabin1993/p/9848720.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70]: /images/20230531/1e190a7d447f452d9173db7a4cce4358.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70 1]: /images/20230531/9aa14081ec5f42deb2f5a0c538ca4018.png