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中的数据发生更改之后组件不会发生变化。