• vuex的5个属性值


    Vuex基本使用及进阶

    一、下载vuex依赖

    npm install vuex -S
    

    二、启用vuex

    在src文件下创建store文件夹,在里面新建一个index.js文件,在文件里书写以下代码

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    // 启用vuex
    Vue.use(Vuex)
    
    // 声明vuex实例对象,创建四个对象属性
    export default new Vuex.Store({
        state: {},
        mutations: {},
        actions: {},
        getters: {}
    })
    

    三、注入store

    在main.js文件中全局注入store实列对象

    // 引入store实例对象
    import store from '@/store/index'
    
    // 将store注入到vue实列对象中
    new Vue({
      el: '#app',
      store,
      render: h => h(Counter)
    })
    

    四、vuex的使用

    1、state的使用

    用来存储数据的对象,对象中的数据可以在所有组件中使用

    1.存储数据

    const state = {
        newData: 5
    }
    

    2.在其他组件中获取数据

    this.$store.state.newData
    // 例如:输出结果为5
    <p>{{$store.state.newData}}</p> 
    

    3.获取state中多个数据

    // 通过引入mapState辅助函数实现
    import {mapState} from 'vuex'
    

    注意mapState函数有两个方式赋值,需要结合计算属性
    第一种是对象赋值

    computed: mapState({
    	// 箭头函数让代码简练
        count: state => state.count
        // 传字符串参数可以等价于箭头函数: 'count' == state => state.count
        countAlias: 'count'
    })
    

    案例演示:

    // store>index.js
    export default new Vuex.Store({
      state: {
        count: 1,
        sum: 10,
        add: 5
      }
    })
        
    // state.vue
    <script>
        import {mapState} from 'vuex'
        export default new Vue({
            computed: mapState({
                count: state => state.count,
                sum: state => state.sum,
                add: state => state.add
            })
        })
    </script>
        
    <template>
        <div id="state">
        	<p>{{count}}</p> // 1
        	<p>{{sum}}</p> // 10
        	<p>{{add}}</p> // 5
        </div>
    </template>
    

    第二种是数组赋值(常用,推荐)

    // 映射this.count为store.state.count
    computed: mapState([
        'count'
    ])
    

    案例演示:

    // store>index.js
    export default new Vuex.Store({
      state: {
        count: 3,
        sum: 6,
        add: 9
      }
    })
        
    // state.vue
    <script>
        import {mapState} from 'vuex'
        export default new Vue({
            computed: mapState([
                'count',
                'sum',
                'add'
            ])
        })
    </script>
        
    <template>
        <div id="state">
        	<p>{{count}}</p> // 3
        	<p>{{sum}}</p> //6
        	<p>{{add}}</p> // 9
        </div>
    </template>
    

    第三种是展开运算符,在组件的方法中使用

    // 使用对象展开运算符将此对象混入到外部对象中
    computed: {
        ...mapState({
            count: 'count',
            sum: 'sum',
            add: 'add'
        })
    }
    

    2、mutations的使用

    一个对象,保存的是更改state的函数,也只有它能更改state中的值,该函数可以传入两个参数,第一个参数为state,第二个参数为传入的数据,一般为一个对象

    const mutations = {
        add (state, n) {
            state.count += n
        }
    }
    

    在其他组件中调用触发函数,改变state中变量的值

    // 触发函数里有两个参数,第一个为调用的mutations里面的函数的函数名,第二个为数据
    this.$store.commit('add', 2)
    
    // 例如:
    <button @click="$store.commit('add', 2)">点击改变count</button>
    

    如果想要触发事件像正常函数那样,如:@click="add",则需要通过mapMutations辅助函数,需要结合methods对象

    // 将 this.increment() 映射为 this.$store.commit('adds')
    // 载荷:this.increment(amount) 映射为 this.$store.commit('adds', amount)
    

    引入mapMutations辅助函数

    import {mapMutations} from 'vuex'
    

    第一种对象方式

    // 注意命名不要和state中的变量重名
    methods: mapMutations({
        adds: 'adds',
        reduce: 'reduce'
    })
    

    案例演示:

    
    

    第二种数组方式

    methods: mapMutations([
        'adds',
        'reduce'
    ])
    

    第三种展开运算符,在组件的方法中使用

    methods: {
        ...mapMutations({
            adds: 'adds',
            reduce: 'reduce'
        })
    }
    
    methods: {
        ...mapMutations([
            'adds',
            'reduce'
        ])
    }
    

    3、actions的使用

    一个对象,保存的是触发mutations的函数,让mutations去修改state中的值,也可以是异步请求获取数据,获取数据后再通过context.commit()触发更改

    // 相当于将$store.commit上的commit对象传进来,让方法体逻辑和代码更清晰明了
    const actions = {
        addsAction: ({commit}) => commit('adds')
    }
    
    // 传递参数
    const actions = {
        addsAction({commit}, n){commit('adds', n)}
    }
    
    // 传入任意参数,相当于store本身
    const actions = {
        reduceAction: (context) => context.commit('reduce')
    }
    
    // 传递参数
    const actions = {
        reduceAction(context,n){context.commit('reduce', n)}
    }
    

    在其他组件中触发actions函数

    this.$store.dispatch('addsAction')
    
    // 如果有参数的话,就传入参数,一般以对象的方式传入
    this.$store.dispatch('addsAction', {
      amount: 10
    })
    
    // 例如:
    <button @click="$store.dispatch('addsAction', 1)">点击改变p的值</button>
    <button @click="$store.dispatch('reduceAction', 1)">点击改变p的值</button>
    

    如果想要触发事件像正常函数那样,如:@click="add",则需要通过mapActions辅助函数,需要结合methods对象方法

    引入mapActions辅助函数

    import {mapActions} from 'vuex'
    

    第一种对象方式

    methods: mapActions({
        addsAction: 'addsAction',
        reduceAction: 'reduceAction'
    })
    

    案例演示:

    <button @click="addsAction(1)">点击改变p的值</button>
    <button @click="reduceAction(1)">点击改变p的值</button>
    

    第二种数组方式

    methods: mapActions([
        'addsAction',
        'reduceAction'
    ])
    

    第三种展开运算符,需要在组件方法中使用

    methods: {
        ...mapActions({
            addsAction: 'addsAction',
            reduceAction: 'reduceAction'
        })
    }
    
    // 或者数组形式
    methods: {
        ...mapActions([
            'addsAction',
            'reduceAction'
        ])
    }
    

    4、getters的使用

    getters相当于计算属性,用来重新修改state中变量的值,再返回对应的值,类似于vue的过滤器

    const getters = {
        getUsername: state => state.username + '1'
        // 也可以这样写
        getUsername (state) {
            return state.username + '1'
        }
    }
    

    getters的使用方式同前面的差不多
    第一种,正常使用方式

    this.$store.getters.getUsername
    

    第二种,就是数组模式

    computed: {
        ...mapGetters([
            'getUsername'
        ])
    }
    

    第三种,就是对象模式

    computed: {
        ...mapGetters({
            getUsername: 'getUsername'(前面是重新定义的方法名,后面是你定义在getters里面的方法名)
        })
    }
    

    五、属性变化监听

    一般都是通过vue的watch来监听,watch监听分为普通监听和深度监听(对象)

    // 例如,我们把state获取到并去监听数据变化来执行我们想要执行的事件
    computed: {
        ...mapState([
            'username'
        ])
    }
    watch: {
        username (newVal, oldVal) {
            console.log('新值:' + newVal + '旧值:' + oldVal)
            // to do something here
        }
    }
    

    如果返回一个对象,我们要监听对象或者对象的某一个属性变化,则这样做

    // 普通监听
    computed: {
        ...mapGetters([
            'userInfo'
        ])
    },
    watch: {
        userInfo (newVal, oldVal) {
            console.log('新值:' + newVal + '旧值:' + oldVal)
            // to do something here 
        }
        // 必须
        deep: true
    }
    // 监听对象某个属性的变化
    userInfo.username (newVal, oldVal) {
        console.log('新值:' + newVal + '旧值:' + oldVal)
        // to do something here 
    }
    // 如果想要对象中某个属性值改变时执行操作,可以通过computed来作为中间层来实现
    computed: {
        username () {
            return userInfo.username
        }
    }
    watch: {
        username (newVal, oldVal) {
            console.log('新值:' + newVal + '旧值:' + oldVal)
            // to do something here
        }
    }
    

    六、注意事项

    1、actions与mutations的区别

    actions区别于mutations的地方在于mutations只能进行同步更改,而actions中的更改可以是异步执行。

    所以基本上所有用户执行的直接数据更改都是触发mutations属性函数执行,而需要与后端进行数据交互的数据更改通常是通过actions属性函数去执行。

    2、定义actions与mutations属性函数的注意事项

    定义mutations属性函数时必须传递的第一个参数是state,因为要对state进行更改,第二个参数代表传入的新参数。

    mutations属性函数只接受两个参数,如果要同时更改多个属性值,可以通过对象传入。

    在actions属性函数中可以通过context.commit()方法触发mutations属性函数。定义actions属性函数时,必须传递的第一个参数是context,用于触发mutations函数。

    3、触发actions与mutations属性函数的方法

    在子组件中通过this.$store.commit()方法触发mutations属性函数。在注册store的Vue实例中(第三步中将会讲到)可以通过store.commit()触发。

    commit函数第一个参数是mutations的属性函数名,第二个参数是传入的新值。

    actions属性函数中可以进行异步操作,比如通过ajax或者Vue.Resource()进行数据获取,获取数据后再通过context.commit()触发更改。

    触发actions属性函数使用this.$store.dispatch()或者store.dispatch() (在注册store的Vue实例中)函数。dispatch函数传递的一个参数是actions属性函数名称。

    如果希望在Vue实例创建完成还未挂载时就从后端获取数据,则可以在created钩子函数中调用actions属性函数。

    4、在组件中访问数据中心state的注意事项

    在Vue实例中可以通过this.$store.state对象获取state中的数据。如果希望在state中的数据发生更改之后,组件会自动更新,则应该使用组件的computed属性定义数据,而不是通过data属性定义。

    如果使用data定义组件数据,则state中的数据发生更改之后组件不会发生变化。

    再宏伟的目标,拆分下来,也只是一串串的代码而已;一串串的代码,细分来看,也只是一个一个的字母而已!也许,我做不到一晚上完成大神一小时随便敲打的项目,但为这一目标,每天添砖加瓦,我想我应该是可以完成的!
  • 相关阅读:
    《Rubu基础教程第五版》第一章笔记
    《Linux Command Line and Shell Scripting Bible》Part 14 处理用户输入
    Phpstorm-Xdebug配置
    Phpstorm-svn配置
    Phpstorm-sftp配置
    3前端案例-遮罩
    2前端案例-选项卡样式
    1前端案例-tag标签+随机位置
    Phpstorm-php在线手册配置
    mysql语句总结
  • 原文地址:https://www.cnblogs.com/Annely/p/14749496.html
Copyright © 2020-2023  润新知