vuex 使用

Hanks10100 发布于2019-08-22 17:57 / 2298人阅读

摘要：学习笔记存储全局的状态数据，在整个的所有组件里面都可以访问对应原生的定义的是一系列操作里面数据的方法需要注意的是参数的写法类似于原生里面的就是里面的参数传递过来的参数对里面数据的一个过滤处理对应原生的例如当我们改变里面的数据的时候，会监

Vuex 学习笔记

store.js 存储全局的状态数据，在整个vue的所有组件里面都可以访问对应原生的 data

const state = {
    count: 1
}

export default state;

mutations.js 定义的是一系列操作state里面数据的方法（需要注意的是参数的写法）类似于原生里面的methods

    const mutations = {
        // state就是store里面的参数  num传递过来的参数
        add(state, num) {
            state.count = state.count + num;
        },
        reduce(state) {
            state.count--;
        }
    };
    export default mutations;

getters 对state里面数据的一个过滤处理对应原生的 computed 例如当我们改变state里面的数据的时候，会监听这个数据的变化，返回一个新的数据

const getters = {
    countDouble(state) {
        return state.count % 2 ? "奇数" : "偶数"
    }

}
export default getters;

当我们通过mutations里面的定义的方法改变state的时候，会实时的更新这个数是奇数还是偶数

action 项目中，大多数情况都是异步的操作,怎么处理异步的操作

   addActions(context, params) {
        /**
         * context 里面的参数 
         * { dispatch commit getters state }
         * params 就是调用 addActions 里面的参数 就是这里的 addActions(100) 参数就是 100
     */
        console.log(context, params)
        fetch("https://api.myjson.com/bins/y10ma").then(data => {
            return data.json()
        }).then(data => {
            // 异步操作 add 方法就是
            context.commit("add", data.num)
        });

    },
    
    // 这个地方就是解构赋值
    reduceActions({ commit }) {
        console.log(commit);
        commit("reduce")
    }
}

export default actions;

将所有的文件整合进入 store文件夹下面的index.js 里面

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

import state from "./store"; //全局的state仓库
import mutations from "./mutations"; // 全局的 mutations 定义全局的事件
import getters from "./getters"; // 全局的 computed 通过监听 state 里面值得变化 返回需要的数据类型
import actions from "./actions" // 全局的异步操作 
const store = new Vuex.Store({
    state, // 定义状态
    mutations,
    getters,
    actions
});

export default store;

最后一步就是需要挂载到全局的vue上 main.js文件

import Vue from "vue"
import App from "./App"
import router from "./router"
Vue.config.productionTip = false

import store from "./store/index";

/* eslint-disable no-new */
new Vue({
    el: "#app",
    router,
    store,
    components: { App },
    template: ""
})

如何在组件当中调用上面的一系列的方法。

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

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

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

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

livem 2019-08-23 16:11 评论0 收藏0
Vuex源码阅读笔记

摘要：而钻研最好的方式，就是阅读的源代码。整个的源代码，核心内容包括两部分。逃而动手脚的代码，就存在于源代码的中。整个源代码读下来一遍，虽然有些部分不太理解，但是对和一些代码的使用的理解又加深了一步。笔记中的Vue与Vuex版本为1.0.21和0.6.2,需要阅读者有使用Vue，Vuex，ES6的经验。起因俗话说得好，没有无缘无故的爱，也没有无缘无故的恨，更不会无缘无故的去阅读别人的源...

hosition 2019-08-21 13:44 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

fai1017 2019-08-30 13:53 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

zilu 2019-08-26 11:35 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

fjcgreat 2019-08-01 18:30 评论0 收藏0
vuex入门

摘要：使用，引入之后用进行引用。在模板中引入们刚建的文件，并在模板中用输出的值。在文件中加入两个改变的方法。和单纯的全局对象有以下两点不同的状态存储是响应式的。改变中的状态的唯一途径就是显式地提交。 vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。通俗的解释就是，Vuex 就是为 vue 组件之间进行数据共享而开发的插件。 vuex 什么时候用？实现数据...

weakish 2019-08-23 16:56 评论0 收藏0