Vuex得详细教程

燃烧中滴小宇宙

已于 2022-02-26 09:58:15 修改

阅读量613

点赞数 2

文章标签： vue.js javascript 前端

于 2022-02-25 21:18:19 首次发布

本文链接：https://blog.csdn.net/m0_52553037/article/details/123136235

版权

本文深入介绍了Vuex，一个用于Vue.js应用的状态管理模式，强调其集中式管理组件状态、单向数据流的概念。通过示例展示了如何下载并创建Vuex实例，包括state、actions、mutations和getters的使用。同时，文章还探讨了Vuex的模块化特性，通过代码实例解释了如何创建和挂载模块，以及如何在模块中处理状态和操作。

摘要由CSDN通过智能技术生成

一.了解Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式+库（也就是vue的公共仓库，存储一些公共变量）。它采用集中式存储管理应用得所有组件的状态，Vuex 可以帮助我们管理共享状态，并以相应的规则保证状态以一种可预测的方式发生变化

单向数据流的概念

二.下载

npm install vuex@next --save

需要的地方引入

2.1创建vuex实例对象

store（仓库的意思）

如：const store = new Vuex.Store({

注：state有两种写法一种对象形式，一种函数形式

1.state:{ 所有的变量都写在这里},

2.state(){

return{

所有的变量都写在这里
}

}，

actions:{

函数里面会自动回调一个context

addCount(context){

context.commit("addCount")//执行mutations里面的addCount

}

mutations:{

里面为函数,函数的参数会自动回调一个state

如：addCount(state){

}

})

里面有三个主要参数

state、actions、mutations 、getters(相当于vue当中的computer）

2.2挂载store，挂载到vue实例中，挂载完毕之后每一个组件上都会多出一个对象。$store

如：const app = new Vue({

el:"#app",

store,//挂载

data(){

return{
methods{

add(){

1.这里面不能用this.$store.state.变量，来直接修改变量

要使用this.$store.commit("addCount")来修改，它会自动执行mutations的方法

2.也可以通过this.$store.dispatch("addCount")，它会自动执行actions里面的方法

}

})

三、Module模块化

3.1，什么是模块化

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

（按着上面的写可能有点不清楚，模块这一部分我直接写一个代码小例子，在代码里面介绍，第二部分代码是对象展开运算符的代码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{token}}
        <button @click="updateToken">更新Token</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vuex/dist/vuex.js"></script>
    <script>
        //第一步先创建一个模块
        let user = {
            // namespaced: true, 加入这个属性之后，vue里面的methods 必须设置成这样
            //this.$store.commit("suser/etToken", "我是一个大笨蛋")

            state: {
                token: "我是一个大帅哥"
            },
            actions: {},
            mutations: {
                setToken(state, newToken) {
                    state.token = newToken
                }
            },
            getters: {}
        }

        // 创建Vuex实例对象,并在modules里面注册
        const store = new Vuex.Store({
            // state mutations actions getters
            modules: {
                user
            }
        })

        const app = new Vue({
            el: "#app",
            store,
            computed: {
                token() {
                    return this.$store.state.user.token
                }
            },
            methods: {
                updateToken() {
                    // user/setToken
                    this.$store.commit("setToken", "我是一个大笨蛋")
                }
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{count}} --- {{info}}
        <button @click="add">增加</button>
        <button @click="sub">减少</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vuex/dist/vuex.js"></script>
    <script>
        // 1.vuex实例对象
        const store = new Vuex.Store({
            // 1.state
            // 
            // state() {
            //     return {
            //         count: 0
            //     }
            // }
            state: {
                count: 0
            },
            // getters相当于组件中的comouted
            getters: {
                info(state) {
                    if(state.count > 20){
                        return "这个值大于20了"
                    }else {
                        return "这个值小于20了"
                    }
                }
            },
            actions:{
                //在actions里面的函数回调出来的是  context 是上下文 -- store仓库
                addCount(context, step) {
                    context.commit("addCount", step)
                },
                subCount(context, step) {
                    context.commit("subCount", step)
                }
            },
            // 
            mutations: {
                // 函数
                subCount(state, step) {
                    state.count-=step;
                },
                addCount(state, step) {
                    state.count+=step
                }
            }
        })


        const app = new Vue({
            el: "#app",
            // 2.挂载store。 挂载完毕之后 每一个组件上都会多出一个对象。$store
            store,
            data() {
                return {
                    
                }
            },
            computed: {
                // 必须这样
                // 
                ...Vuex.mapState({
                    // 左边是computed中的变量名称  右边是vuex中的变量名
                    count: 'count'
                }),
                ...Vuex.mapGetters({
                    info: 'info'
                })
            },
            methods: {
                sub() {
                    this.$store.dispatch("subCount", 2)
                },
                add() {
                    // 提交 执行mutations里面的方法
                   this.$store.dispatch("addCount", 2)
                    
                }
            }
        })
    </script>
</body>
</html>

燃烧中滴小宇宙

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuex得详细教程

一.了解VuexVuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用得所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化单向数据流的概念二.下载npm install vuex@next --save需要的地方引入<script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/vuex/...
复制链接

扫一扫