vuex

这是一个与vue配套的公共数据管理工具,可以将一些需要共享的数据保存到vuex中,以此方便项目中的任何组件都可以从vuex中得到共享数据。cnpm i vuex -S 装包

读取数据

//在main中导入vuex然后挂载在vue对象上
import Vuex from "vuex"
Vue.use(Vuex)

var store = new Vuex.Store({
    //state:数据存储仓库
    state: {
        txt: "hello"
    }
})
var vm = new Vue({
    el: "#box",      
    store: store 
})

现在可以在项目中的任何可以使用js的文件中访问store

<div id="box">
    {{$store.state.txt}}
</div>

操作数据

虽然可以使用$store.state.txt=xx的方式直接操作数据,但vuex并不建议这样做,更高级的方法是使用vuex的mutations,操作数据的代码方法放在mutations中,然后通过$store调用操作方法处理数据。mutations内的方法最多接收两个参数,第一个固定为state,另一个是自定义参数。

<div class="btn-2" @click="add">test</div>

var store = new Vuex.Store({
    //state:数据存储仓库
    state: {
        txt: "hello"
    },
    //代理执行对数据的操作
    mutations: {
        add(state) {
            state.txt += "worlld";
        }
    }
});

var vm = new Vue({
    el: "#box",      
    store: store,
    methods: {
        add: function () {
            this.$store.commit("add");
        }
    }
})

包装数据

如果需要对数据进行包装处理,可以使用getters,获取数据的时候就不再直接调用$store.state.xx

var store = new Vuex.Store({
    //存储
    state: {
        count: 0
    },
    //操作
    mutations: {
        add: function (state, num) {
            state.count += num;
        },
        remove: function (state, num) {
            state.count -= num;
        }
    },
    //包装,可以对仓储的数据进行包装或计算
    getters: {
        wrapperValue: function (state) {
            return "当前数量" + state.count;
        }
    }
});
//获取包装的数据:$store.getters.wrapperValue

持久化存储

vue路由机制使不需要刷新浏览器地址就可以静态加载组件到客户端页面上显示,而vuex默认的存储机制也只是在不刷新的前提下存储数据,如果向持久化存储数据,则需要使用js原生的对象localStorage,将数据存储在localStorage中,刷新浏览器页面后需要从vuex的store中读取数据,则可以把localStorage的数据放到vuex中。

<template>
    <div>
        <input type="text" ref="input">
        <button @click="add">持久化存储</button>
        {{$store.state.x}}
    </div>
</template>
export default {
    methods: {
        add: function () {
            var x = this.$refs.input.value;
            this.$store.commit("add", x);
        }
    }
};

在main.js中

var x = localStorage.getItem("x") || ""; 
var store = new Vuex.Store({
    state: {
        x: x,//将本地存储库的数据放到vuex的仓储中
    },
    mutations: {
        add: function (state, str) {
            state.x += str;
            localStorage.setItem("x", state.x);
        }         
    }
});

刷新浏览器后数据依然存在

localStorage.removeItem("key") //移除指定的数据
localStorage.clear() //移除所有数据

更多关于localStorage的信息,参考:localStorage使用总结

Javascript - 学习总目录

Javascript - Vue - vuex的更多相关文章

  1. 我的音乐盒子(nodejs7 + koa2 + vue + vuex + vue-router)

    你们知道的,nodejs对jser来说,是个好东西,快快的,自从接触nodejs后,总想弄点东西. 这弄个啥了,一天打开百度音乐盒,哟,自己弄一个如何了,好啊好啊. 后台: nodejs 7 + ko ...

  2. vue vuex vue-rouert后台项目——权限路由(超详细简单版)

    项目地址:vue-simple-template共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blu ...

  3. Vue+Vuex实现自动登录 升级版

    Vue+Vuex实现自动登录 升级版 之前实现的版本在这里:Vue+Vuex实现自动登录       在之前实现的版本中,如果你进行测试,可以看到在浏览器的local Storage中,确实里面有了我 ...

  4. 基于Vue+Vuex+Vue-Router+axios+mint-ui的移动端电商项目

    第一步:安装Node 1.打开NodeJS的官网,下载和自己系统相配的NodeJS的安装程序,包括32位还是64位一定要选择好,否则会出现安装问题. 下载地址:https://nodejs.org/e ...

  5. vue+vuex初入门

    Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 解决问题: 传参的方法对于多层嵌 ...

  6. use vue vuex vue-router, not use webpack

    vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑.因为现代构建前端项目的一般模式是: 安装webapck ...

  7. [ABP开源项目]--vue+vuex+vue-router+EF的权限管理系统

    好久没写文字了,当然大家也不期待嘛,反正看代码就行了. 演示网站 首先说下这个项目吧. 如标题一样是基于VUE+.NET开发的框架,也是群友一直吼吼吼要一个vue版本的ABP框架. 我们先来看看首页吧 ...

  8. 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面

    一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...

  9. vue+vuex+axios+echarts画一个动态更新的中国地图

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

随机推荐

  1. 如何访问网络损伤仪WANsim的控制界面

    一台全新的WANsim网络损伤仪的默认IP地址为192.168.1.199.网络损伤仪的控制界面部署在 8080 端口. 所以,我们在成功连接了WANsim之后,只需要在控制电脑上打开谷歌浏览器,访问 ...

  2. python中浮点数比较判断!为什么不能用==

    问题:浮点数比较为什么不能用==来写? 答:计算机里面的数字是由二进制保存的,在计算机内部有些数字不能准确的保存,于是就保存了一个最靠近的数字. 计算机表示浮点数(float或double类型)都有一 ...

  3. MyBatis使用Zookeeper保存数据库的配置,可动态刷新

    核心关键点: 封装一个DataSource, 重写 getConnection 就可以实现 我们一步一步来看. 环境: Spring Cloud + MyBatis MyBatis常规方式下配置数据源 ...

  4. 记录21.07.21 —— ES6基础

    学习目录 课件地址: ES6核心技术课件 1.let关键字 1.1 let与var的区别 ①let不能重复定义 ②块作用域的区别 ③变量声明之前let不能使用,var可以 ④ 课件代码 <htm ...

  5. CentOS 8.0 安装docker 报错:Problem: package docker-ce-3:19.03.4-3.el7.x86_64 requires containerd.io >= 1

    1.错误内容 package docker-ce-3:19.03.2-3.el7.x86_64 requires containerd.io >= 1.2.2-3, but none of th ...

  6. nfs配置项在/etc/exports中的说明

    rw 可读写的权限 ro 只读的权限no_root_squash 登入NFS主机,使用该共享目录时相当于该目录的拥有者,如果是root的话,那么对于这个共享的目录来说,他就具有root的权       ...

  7. Java书单-比较全的一篇

    本文已收录至码云:https://gitee.com/jalon2015/java-book 前言 之前写过一篇,Java核心书单,里面涵盖了几本主要的Java书籍: 后来有朋友反馈说,这几本太少了, ...

  8. 只要套路对,薪资直接翻一倍!保姆级Android面试葵花宝典,肝完面试犹如开挂

    跳槽,这在 IT 互联网圈是非常普遍的,也是让自己升职加薪,走上人生巅峰的重要方式.那么作为一个普通的Android程序猿,我们如何才能斩获大厂offer 呢? 疫情向好.面试在即,还在迷茫踌躇中的后 ...

  9. Android开发三年,面了八家公司终于腾讯上岸,含泪整理面经

    在下2017年毕业,目前从事android开发工作已经3年多了,前段时间刚完成一次跳槽,面试了几家公司,将一些面试经验分享给大家,希望对大家有所帮助. 写在前面 这次跳槽总共是面了8家,(2小,4中, ...

  10. 记一次mysql事务未提交导致锁未释放的问题

    记一次mysql事务未提交导致锁未释放的问题 ## 查看未提交的事务(3秒内未操作的事务) SELECT p.ID AS conn_id, P.USER AS login_user, P.HOST A ...