Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 1.直接引入本地下载vuex.js文件

//快捷下载的方式--------------npm install vuex --save-dev
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

2.cdn加速

https://unpkg.com/vuex

3.在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来安装 Vuex:

//commonjs规范
var Vue  = require('vue')
var Vuex = require('vuex')

//es6的使用方式
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

state --- 单一状态树 可以简单的理解成数据模型这个数据模型在整个应用中是唯一的 它是用一个对象包含了应用的所有的状态 (数据),至此,作为唯一数据源儿存在 每一个应用将仅仅包含一个vuex.store的实例,

mutations --- 状态更改 通俗来说,也就是进行数据的修改 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于methods和事件

使用vuex进行数据的操作 在vue组件中获取vuex的状态,每当 store.state.count 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
        <script src="https://unpkg.com/vuex"></script>
    </head>

    <body>
        <div id="app">
            <p>{{ count }}</p>
            <p>
                <button @click="increment">+</button>
                <button @click="decrement">-</button>
            </p>
        </div>

    </body>

</html>
<script>
    const store = new Vuex.Store({
        //状态----数据模型
        state: {
            count: 0
        },
        //改变----数据操作----箭头函数
        mutations: {
            //increment: state => state.count++,
            increment: function(state) {
                state.count++
            },
            //decrement: state => state.count-- 
            decrement: function(state) {
                state.count--
            }
        }
    })
    const app = new Vue({
        el: '#app',
        computed: {
            //在vue中获取vuex的状态----状态存储是响应式的(数据的双向绑定)
            //从store实例中读取数据最简单的方式就是在计算属性中获取某个值
            count() {
                return store.state.count
            }
        },
        methods: {
            increment() {
                store.commit('increment')
            },
            decrement() {
                store.commit('decrement')
            }
        }
    })
</script>

mapState 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。 为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
        <script src="https://unpkg.com/vuex"></script>
    </head>

    <body>
        <div id="app">
            <p>{{ count }}</p>
            <p>
                <button @click="increment">+</button>
                <button @click="decrement">-</button>
            </p>
        </div>

    </body>

</html>
<script>
    const store = new Vuex.Store({
        //状态----数据模型
        state: {
            count: 0,
            test:100,
        },
        //改变----数据操作----箭头函数
        mutations: {
            //increment: state => state.count++,
            increment: function(state) {
                state.count++
            },

            //decrement: state => state.count-- 
            decrement: function(state) {
                state.count--
            }
        }
    })


    const app = new Vue({
        el: '#app',
        store,
        computed: Vuex.mapState({
            //当需要使用多个数据的的时候,使用计算属性就显得不方便,vuex提供了一种新的方式
            //为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性
            count:function() {
                return store.state.count + store.state.test
            }
        }),
        methods: {
            increment() {
                store.commit('increment')
            },
            decrement() {
                store.commit('decrement')
            }
        }
    })
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏杨建荣的学习笔记

巧用linux命令做图片下载器(r4笔记第7天)

在平时上网的时候,发现有些图片不错,想保存到本地,一个一个的保存确实够费劲的,如果把整个网页都保存了,有些又是自己不需要的,就算下载下来了,还得从上百个网页元素...

3756
来自专栏菩提树下的杨过

mac: vmware fusion中cent os启动假死的解决办法

环境: mac os X 10.9.2 + vmware 6.0.2 + cent OS 6.5 minimal 现象: Booting CentOS (2...

1985
来自专栏慎独

Unity5.6与Xcode8.3原生工程整合交互

1541
来自专栏王二麻子IT技术交流园地

十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面

上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题。今天我们来重新调...

29510
来自专栏GreenLeaves

Fiddler4抓包工具使用教程一

本文参考自http://blog.csdn.net/ohmygirl/article/details/17846199,纯属读书笔记,加深记忆 1、抓包工具有很...

77210
来自专栏salesforce零基础学习

salesforce零基础学习(七十四)apex:actionRegion以及apex:actionSupport浅谈

我们在开发中,很难会遇见不提交表单的情况。常用的apex:commandButton,apex:commandLink,apex:actionFunction,...

2717
来自专栏云计算教程系列

如何使用WP-CLI安装WordPress

很多人都熟悉WordPress的安装,Wordpress安装起来非常简单,其号称5分钟快速安装。但是,当您需要部署多个Wordpress时,重复的工作会拖慢你大...

1642
来自专栏电光石火

推荐几款比较好看HTML admin后台模板

H+是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了...

5.5K1
来自专栏老司机的简书

Git仓库子路径拉取

但是通常情况下大家可能只需要其中一个分类而不是完整的仓库,老司机在翻阅别人代码的时候也遇到过想要拉取仓库一部分的需求。

1133
来自专栏码生

实现更安全、高扩展的自定义键盘 非UIButton

自定义键盘的封装网上的例子比比皆是,有的封装的非常完美,直接pod 集成到项目中便可以简单的使用,可是为什么我还要自定义一个呢? 一不是不是为了显摆,二不是网...

1182

扫码关注云+社区

领取腾讯云代金券