Vuex

作者: 奶瓶SAMA | 来源:发表于2018-05-13 21:01 被阅读0次

    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>
    

    相关文章

      网友评论

          本文标题:Vuex

          本文链接:https://www.haomeiwen.com/subject/hccrdftx.html