Vuex学习

codeKK 发布于2019-08-20 11:19 / 3322人阅读

摘要：参考使用构建单页应用使用和实现购物车场景配置在下创建一个文件夹叫做。入口文件，在根组件调用，然后所有子组件可以共享数据。挂载获取数据及操作从拿数据，然后渲染到页面上如果需要修改可以调用获取状态数据状态变更事件

参考

使用 Vuex + Vue.js 构建单页应用

使用Vue.js和Vuex实现购物车场景
vue-demo-collection

配置Vuex

在src下创建一个文件夹叫做vuex。里面定义三个文件。

mutation-types.js 定义类型的

// src/vuex/mutation-types.js
export const SET_HEADER_TITLE = "SET_HEADER_TITLE"

actions.js 操作，可以分解成多个文件

// src/vuex/actions.js
/**
 * 用统一的函数处理并分发mutations。
 * @param type
 * @returns {function({dispatch: *}, ...[*]): *}
 */
function makeAction (type) {
    return ({ dispatch }, ...args) => dispatch(type, ...args)
}

import {
    SET_HEADER_TITLE
} from "./mutation-types"

/**
 * actions
 */
export const setTitle = makeAction(SET_HEADER_TITLE)

store.js 入口文件，在根组件调用，然后所有子组件可以共享数据。

// src/vuex/store.js
import Vue from "vue"
import Vuex from "vuex"
//import createLogger from "vuex/logger"

Vue.use(Vuex)
//Vue.config.debug = true
//const debug = process.env.NODE_ENV !== "production"

// 导入各个模块的初始状态和 mutations
import index from "./modules/index"
export default new Vuex.Store({
    // 组合各个模块
    modules: {
        index
    },
    //strict: debug,
    //moddlewares: debug ? [createLogger()] : []
})

modules/index.js 只是例子用的，一个index的操作，需要定义数据的状态和mutation。actions.js只是分发操作。

// src/vuex/modules/index.js
import {
    SET_HEADER_TITLE
} from "../mutation-types"

const state = {
    title: "default",
    info: {
        name:""
    }
}

const mutations = {
    [SET_HEADER_TITLE](state, newTitle) {
        state.title = newTitle
    }
}

export default {
    state,
    mutations
}

挂载store

// src/App.vue
import store from "./vuex/store"
import HeaderComponent from "./components/header"
import FooterComponent from "./components/footer"
export default {
    store,
    components: {
        HeaderComponent,
        FooterComponent
    }
}

获取数据及操作

// src/components/header.vue
// 从vuex拿数据，然后渲染到页面上
// 如果需要修改可以调用setTitle
import { setTitle } from "../vuex/actions"
export default {
    vuex: {
        //获取vuex状态数据
        getters: {
            title: state => state.title,
            info: ({index}) => index.info
        },
        //状态变更事件
        actions: {
            setTitle
        }
    }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80506.html

Vuex源码学习（一）功能梳理

摘要：我们通常称之为状态管理模式，用于解决组件间通信的以及多组件共享状态等问题。创建指定命名空间的辅助函数，总结的功能首先分为两大类自己的实例使用为组件中使用便利而提供的辅助函数自己内部对数据状态有两种功能修改数据状态异步同步。 what is Vuex ? 这句话我想每个搜索过Vuex官网文档的人都看到过，在学习源码前，当然要有一些前提条件了。了解Vuex的作用，以及他的使用场景。 ...

livem 2019-08-23 16:11 评论0 收藏0
Vue.js学习系列二 —— vuex学习实践笔记（附DEMO）

摘要：有兴趣的同学可以查看之前发布的文章学习系列一学习实践笔记附学习系列二学习实践笔记附学习系列三和网络传输相关知识的学习实践学习系列四打包工具的使用学习系列五从来聊聊学习系列项目地址项目暂时有点乱，之后会进行整理优化。上次学习了vue-router的使用，让我能够在各个页面间切换，将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。注：本...

DobbyKim 2019-08-21 15:52 评论0 收藏0
Vuex 学习笔记

摘要：是什么用来解决组件之间共用数据问题的一个插件内部结构就是被共用的数据但是不可以被直接操作，不可以直接访问可以直接操作中的数据，可以定义中的数据如何被改变可以触发对的改变，该触发操作专业名词为与的交互通过的方式来改变通过来读取中的数据的使用方 VUEX是什么？用来解决组件之间共用数据问题的一个插件 Vuex 内部结构 State 就是被共用的数据（但是不可以被直接操作，不可以直接...

hzc 2019-08-26 13:41 评论0 收藏0
Vuex源码学习（二）脉络梳理

摘要：各位看官没看过功能梳理的可以先阅读下源码学习一功能梳理前车之鉴有了源码学习的经验，每次看认真钻研源代码的时候都会抽出一小段时间来大体浏览一遍源代码。大体了解这个源代码的脉络，每个阶段做了什么，文件目录的划分。各位看官没看过功能梳理的可以先阅读下Vuex源码学习（一）功能梳理. 前车之鉴有了vue-router源码学习的经验，每次看认真钻研源代码的时候都会抽出一小段时间来大体浏览一...

chenjiang3 2019-08-23 16:18 评论0 收藏0
Vue学习—— Vuex学习笔记

摘要：的数据会在上显示出来，用户会根据上的内容进行操作，从而触发，接着再去影响是单向数据流的方式驱动的。当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏。中的非常类似于事件每个都有一个字符串的事件类型和一个回调函数。组件是Vue最强大的功能之一，而组件实例的作用域是相互独立的，意味着不同组件之间的数据是无法相互使用。组件间如何传递数据就显得至关重要，这篇文章主要是介绍Vu...

zzbo 2019-08-23 12:21 评论0 收藏0