vue vuex使用总结 actions,mutations的区别

在vue中组件通信的方式有很多，但是不得不提到vuex。也可把它理解为集中管理状态的工具。

使用场景

一个数据在多个页面中都会被使用到，例如：用户信息，购物车信息在多个页面都会被读取和改变
。但如果只是在两个页面中使用的数据 建议通过props和$emit.

五大配置项

1.state

用于存储应用程序的状态，即数据。在Vuex中，我们将所有的状态集中存储在一个对象中，称为state。通过定义state对象，我们可以在应用程序的任何组件中访问和修改状态。

a.声明：

state:{
  userInfo:""
}

b.使用：

$store.state.userInfo

c.辅助函数mapState：

1.import { mapState } from 'vuex'

2....mapState([‘state中属性名’])

2.getters

用于从state中派生出一些状态。getters可以看作是state的计算属性，它们的返回值会根据依赖发生变化而变化。getters可以在组件中使用，类似于计算属性。

a.声明：

getters: {
    name（）(state) {
      return data
    }
}

b.使用：

$store.getters.name

c.辅助函数mapGetters：

1.import { mapGetters} from 'vuex'

2....mapGetters([‘state中属性名’])

3.mutations

用于修改state中的数据。mutations是Vuex中唯一允许修改state的方式。每个mutation都有一个字符串类型的事件类型和一个回调函数，用于实际修改state中的数据。

a.声明：

  mutations：{
  	name(state , payload ) {
  		state.userInfo = payload
  	}
  },

b.使用：

$store.commit.name

c.辅助函数mapMutations：

1.import { mapMutations} from 'vuex'

2....mapMutations([‘state中属性名’])

4.actions

用于处理异步操作和提交mutations。actions可以包含任意异步操作，例如从服务器获取数据，然后再提交一个mutation来修改state中的数据。actions通过提交mutations来间接修改state。

a.声明：

  
 actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    name: function(context, payload) {
      // 1. 异步操作获取数据
      // 2. commit调用mutation来修改数据
      // context.commit('mutation名', 载荷)
    }
}

b.使用：

this.$store.dispath ( ‘name’，参数 ）

c.辅助函数mapActions：

1.import { mapActions} from 'vuex'

2....mapActions([‘state中属性名’])

5.modules

vuex模块化

a.声明：

  
 //要创建 Vuex 模块，可以使用  createModule  方法。该方法接受一个对象作为参数，该对象包含模块的名称和状态。
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user: {
      state: {
        name: 'John Doe',
        age: 20
      }
    }
  }
})

const app = new Vue({
  el: '#app',
  store
})

// 访问模块的状态
console.log(store.state.user.name) 
}

拓展：actions,mutations的区别—下期在更