Vuex 学习笔记

hzc 发布于2019-08-26 13:41 / 2892人阅读

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

VUEX是什么？

用来解决组件之间共用数据问题的一个插件

Vuex 内部结构

State 就是被共用的数据（但是不可以被直接操作，不可以直接访问）

Mutations 可以直接操作（Mutate） State 中的数据，可以定义 State 中的数据如何被改变

Actions 可以触发 Mutations 对States的改变，该触发操作专业名词为commit

Components 与Vuex的交互

通过 dispatch Actions 的方式来改变 State

通过Render来读取State中的数据

Vuex的使用方法

新建一个store.js文件（位置可以自选）

在该文件中引入vue和vuex,并在vue中启用vuex

Improve vue from "vue"
Improve vuex from "vuex"
vue.use(vuex)

在该文件中配置 state，mutations，actions

//这里的state是数据实际储存的地方
const state={
    count:10
}
const mutations={
    add(state,param){
        state.count += param
    },
    reduce(state,param){
        state.count -= param
    }
}
const actions={
    add:({commit},param)=>{
        commit("add",param)
    },
    reduce:({commit},param)=>{
        commit("reduces",param)
    }
}

只有一个store配置的方法

将以上配置在Vuex对象中实例化并导出

export default new vuex.Store({
    state,
    mutations,
    actions
})

在main.js中引用该vuex的store实例

improt store from "./store"
new vue ({
    ......
    store,
    ......
})

在组件中使用vuex的store实例
在页面中引用该实例state的值 $store.state.count
引入该实例的actions

import {mapActions} from ‘vuex’
export default {
  methods:mapActions([‘add’,’reduce’])     
}

页面使用actions @click="add(param)" @click="reduce(param)"

有多个store配置的方法

将以上配置在Vuex对象中实例化并导出

export default new vuex.Store({
    module:{
       a: {
            state,
            mutations,
            actions
        }
    }
})

在main.js中引用该vuex的store实例

improt store from "./store"
new vue ({
    ......
    store,
    ......
})

在组件中使用vuex的store实例
在页面中引用该实例state的值 $store.state.a.count
调用该实例的actions

  import {mapActions} from ‘vuex’
  export default {
      methods:mapActions("a",[‘add’,’reduce’])     
  }

页面使用actions @click="add(param)" @click="reduce(param)"

这篇笔记主要是本人学习Vuex时候的知识总结，如果有不对的地方还请多多斧正

GPU云服务器云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

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

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

Vue.js学习系列二 —— vuex学习实践笔记（附DEMO）

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

DobbyKim 2019-08-21 15:52 评论0 收藏0
用 Vuex 构建一个笔记应用

摘要：如果不熟悉，在这个教程里面，我们会通过构建一个笔记应用来学习怎么用。这个是我们要构建的笔记应用的截图你可以从下载源码，这里是的地址。每当用户点击笔记列表中的某一条时，组件会调用来分发这个会把当前选中的笔记设为。原文：Learn Vuex by Building a Notes App，有删改。本文假设读者熟悉 Vuex 文档的内容。如果不熟悉，you definitely sho...

gggggggbong 2019-08-19 18:12 评论0 收藏0
Vue学习—— Vuex学习笔记

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

zzbo 2019-08-23 12:21 评论0 收藏0
使用 Vuex + Vue.js 构建单页应用

摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

tomorrowwu 2019-08-19 18:42 评论0 收藏0
使用 Vuex + Vue.js 构建单页应用

摘要：鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇下的使用方法，传送门使用构建单页应用新篇华丽的分割线原文地址前言在最近学习的时候，看到国外一篇讲述了如何使用和来构建一个简单笔记的单页应用的文章。鉴于该篇文章阅读量大，回复的同学也挺多的，特地抽空写了一篇 vue2.0 下的 vuex 使用方法，传送门：使用 Vuex + Vue.js 构建单页应用【新篇】 ---------...

cnsworder 2019-08-01 15:25 评论0 收藏0