vue-7-2 vuex中的几个重要属性

1. state

　　作用: 主要用来保存数据状态

　　其它组件调用state中数据： this.$store.state

 

2. getters

　　作用：需要对state中的数据进行变形时（平方，筛选等），就通过getters来调用state中的数据进行变化（不会改变state中的数据状态，而是变型成一个新的数据）

　　使用：

　　　　1. 普通提交：如， 其它组件要调用state中的数据，并且是平方后的数据：

　　　　　　1. 其它组件：this.$store.getters.方法名

　　　　　　2. getters中：

　　　　　　　　定义平方的方法： 方法（state, getters）{...}

　　　　2. 含参数提交：

　　　　　　1. 其它组件：this.$store.getters.方法名（参数）

　　　　　　2. getters中：

　　　　　　　　方法（state, gettters）{

　　　　　　　　　　　　　return function(参数){...}　

　　　　　　　　　　　}

 

3. mutations

　　作用：官方指定，所有直接改变state中数据值的操作，都要通过mutations来进行

　　使用：

　　　　1. 其它组件：@click="组件内事件"

　　　　2. 组件事件中，调用mutations进行提交：

　　　　　　1. 普通提交：this.$store.commit（"事件"）

　　　　　　　或： this.$store.commit（"事件", 参数变量或对象）

　　　　　　2. 完整提交：this.$store.commit（{

　　　　　　　　　　　　type: '事件'，

　　　　　　　　　　　　参数： 参数

　　　　　　　　　　}）

　　　　3. vuex的mutations中：

　　　　　　事件（state,  参数）{...}

　　响应式规则：

　　　　说明： vuex中定义好的数据，在vue加载时就已经是响应式数据，那如果通过mutations修改state的数据，如添加或删除某条数据，而希望该修改可以同步到其它调用处时

　　　　vue.set()

　　　　vue.delete()

//target:可以是对象或数组 key:要添加的属性名 value:要添加的属性的值
Vue.set( target, key, value )
 
 
//target:可以是对象或数组 key:要删除的属性名
Vue.delete( target, key )

 

4. actions

　　作用： mutations是唯一可以直接修改state数据的，且mutations中的方法中不能是异步请求，如网络请求， setTimeOut等

　　那么，如果组件中需要修改state中的某值，且是需要异步操作时，那么就需要actions来作为中间桥梁，actions中进行异步操作，调用mutations中方法来修改state

　　使用：

　　　　1. 组件中调用actions中的方法

　　　　　　this.$store.dispatch('方法名', 参数)

　　　　2. vuex中：

　　　　　　actions中的方法默认参数是context，相当于整个store对象

　　　　　　actions：{

　　　　　　　　方法名（context, 参数）{

　　　　　　　　　　setTimeout( ( ) =>{

　　　　　　　　　　　　context.commit('mutations中的方法名'， 参数)

　　　　　　　　　　},  1000)

　　　　　　　　}

　　　　　　}