浅析Vuex

最新推荐文章于 2022-08-15 22:40:51 发布

qq_42164670

最新推荐文章于 2022-08-15 22:40:51 发布

阅读量195

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42164670/article/details/89028390

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

vuex的定义

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（数据管理仓库） 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

状态自管理应用包含以下几个部分：
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。适合于开发中大型单页应用，我们可以把组件中的共享状态抽取出来，以一个全局单例模式管理，通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

vuex安装

<script>引入

<script src="./vue.js"></script>
<script src="./vuex.js"></script>

导入包

cnpm  i  vuex  -S

然后通过 Vue.use() 来安装 Vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

通过案例说明

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vuex</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="../js/vuex.js"></script>
</head>
<body>
    <div id="app">
        <con></con>
        <button @click="add">add</button>
    </div>
    <script>
        let con = {
            template:`
                <div>
                    <h2>{{num}}</h2>
                    <h2>{{title}}</h2>
                    <h2>{{changeGetter}}</h2>
                </div>
            `,
            //在组件模板中使用state中的数据时需要用computed来监听数据的变化。
            computed:{
                num(){
                    return this.$store.state.num
                },
                title(){
                    return this.$store.state.title
                },
                changeGetter(){
                    return this.$store.getters.changeGetter
                }
            }
        }
        let store = new Vuex.Store({
            state:{
                num:1,
                title:''
            },
            getters:{   // 扩展
                changeGetter(state){
                    return state.num = 404
                }
            },
            mutations:{ // 定义你将来要做的事情
                increment(state,i){
                    state.num +=i
                },
                title(state,str){
                    state.title = str;
                }
            },
            actions:{
                titleAction(context,str){   // 用dispatch提交mutation
                    context.commit('title',str)
                }
            }

        })
        new Vue({
            el:'#app',
            store,
            components:{
                con
            },
            methods:{
                add(){
                    // 提交 mutations的increment事件函数
                    this.$store.commit('increment',1)
                    this.$store.dispatch('titleAction','给力！！！')
                }
            }
        })
    </script>
</body>
</html>

(1) 由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性computed中返回某个状态：每当 this.$store.state.num 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。前提是通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。
(2) Mutation：
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。提交方法如下：

this.$store.commit('increment',1)

(3) Action:
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
通过调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
Action 通过 this.$store.dispatch 方法触发：

 this.$store.dispatch('titleAction','给力！！！')

（4）Getter：
用于在store 中的 state 中派生出一些状态；
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

qq_42164670

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅析Vuex

vuex的定义Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（数据管理仓库）。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。状态自管理应用包含以下几个部分：state，驱动应用的数据源；view，以声明方式将 state 映射到视图；actions，响应在 view 上的用户输入导致的状态变化。Vuex 可以帮助我们管理共...
复制链接

扫一扫