vuex--未完

作者：从前慢现在也慢 | 2024-03-17 16:30:18

踩

vuex--未完

一、简介

vue3.0以上，本文是3.0
vue2.0
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库（全局管理，相当于一个全局变量，所有页面共享）。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、使用介绍

namespace介绍
模块可能会有很多个，公用的一套state、getters、mutations、actions，若想封装更强单独使用，需要加上namespaced:true

注意：namespaced:true, 使用模块中的mutations、getters、actions时候，要加上模块名（uInfo注册时的模块名）
》》调用方法的时候：store.commit(“uInfo/方法名”,data.userLoginInfo)
》》获取属性的时候：store.state.uInfo.属性名

1 、Vuex使用样例包含 state、getters、mutations、actions使用

安装最新版本vuex（新建项目时，可能已做）
```
npm install vuex@next --save
1
```

第一步：引入在main.js 中–生成项目是已经做好

//vuex
import store from './store'
createApp(App).use(store)
1
2
3

第二步：在store文件夹下的index.js中
Promise介绍

import { createStore } from 'vuex'

export default createStore({
  //全局状态初始值
  state: {
    count:1
  },
  //计算state，获取对应的值
  getters: {
    countStatus(state){
      return state.count <= 1
    }
  },
  //同步更新状态的方法--更新state的唯一方法，commit mutations
  mutations: {
    setCount(state,num){
      state.count=num;
    }

  },
  //可以异步操作，可以返回promise，更改数据还是传递到 mutations 去更改
  actions: {
    setCountPromise(context,num){//包含store的上下文对象
      //Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
      //Promise就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。
      //resolve执行成功时的回调；reject执行失败时的回调
      return new Promise((resolve, reject) => {
        if(num >100){
          reject("不能大于100")
        }else{
          context.commit("setCount",num)
          resolve()
        }
      })
    }
  },
  //数据较多时，分模块
  modules: {
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

第三步：vue页面代码

<template>
    <p>{{num}}</p>
    <el-button type="primary" @click="handle">提交</el-button>
</template>
<script>
    import {reactive,toRefs} from "vue"
    import { useStore} from "vuex"
    export default {
        name:"user",
        setup(){
            const store =useStore()
            const count = store.state.count
            const data = reactive({
                num:count,
            })
            console.log("修改前的getters",store.getters.countStatus)
            const handle=()=>{
            	//测试mutations中的setCount
                //store.commit("setCount",100)
                //测试actions中的setCountPromise
                //异步调用 dispatch
                store.dispatch("setCountPromise",100).then(res=>{
                    alert("修改成功")
                }).catch(err=>{
                    alert(err)
                });
                console.log(store.state.count)
                console.log("修改后的getters",store.getters.countStatus)
            }
            return{
                ...toRefs(data),
                handle
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

2、modules分模块

第一步：在store文件夹下，建立sate，里面包含多个js文件，一个js代表一个模块

例子：num.state.js，多了namespaced，缺少modules，其他的state、getters、mutations、actions和index中的一样

export default {
    //防止模块名字相同
    namespaced:true,
    //全局状态初始值
    state: {
        count:1
    },
    //计算state，获取对应的值
    getters: {
        countStatus(state){
            return state.count <= 1
        }
    },
    //更新状态的方法--更新state的唯一方法，commit mutations
    mutations: {
        setCount(state,num){
            state.count=num;
        }

    },
    //可以异步操作，可以返回promise，更改数据还是传递到 mutations 去更改
    actions: {
        setCountPromise(context,num){//包含store的上下文对象
            //Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
            //Promise就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。
            //resolve执行成功时的回调；reject执行失败时的回调
            return new Promise((resolve, reject) => {
                if(num >100){
                    reject("不能大于100")
                }else{
                    context.commit("setCount",num)
                    resolve()
                }
            })
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

第二步：将index.js中的state、getters、mutations、actions代码删除，需要引入注册mutations

import { createStore } from 'vuex'
//引入state模块
import number from "../store/state/num.state.js"
export default createStore({
  //数据较多时，分模块
  modules: {
    number//注册state模块
  }
})

1
2
3
4
5
6
7
8
9
10

第三步：vue页面需要相应的更改

<template>
    <div>用户列表aaa</div>
    <p>{{num}}</p>
    <el-button type="primary" @click="handle">提交</el-button>
</template>
<script>
    import {reactive,toRefs} from "vue"
    import { useStore} from "vuex"
    export default {
        name:"user",
        setup(){
            const store =useStore()
            const count = store.state.number.count
            const data = reactive({
                num:count,
            })
            //store.getters.countStatus改成现在这样否则会报语法错误
            console.log("修改前的getters",store.getters["number/countStatus"])
            const handle=()=>{//调用mutations中的setCount方法
                //store.commit("number/setCount",100)
                store.dispatch("number/setCountPromise",100).then(res=>{
                    alert("修改成功")
                }).catch(err=>{
                    alert(err)
                });
                console.log(store.state.number.count)
                console.log("修改后的getters",store.getters["number/countStatus"])
            }

            return{
                ...toRefs(data),
                handle
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

三、核心概念

1、state

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit)
mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/257044

vuex--未完

一、 简介

二、使用介绍

1 、Vuex使用样例包含 state、getters、mutations、actions使用

2、modules分模块

三、核心概念

1、state

一、简介