如何使用Vuex中的五大属性

Vuex中的state(公共数据)

一、使用全局的state

1.直接使用

(1).在组件中直接使用
  this.$store.state.属性名
(2).在模板中直接使用
  $store.state.属性名
复制代码

2.map辅助函数

(1).不更改属性名使用
  computed:{
     ...mapState(['属性名称'])
  }
(2).更改属性名使用
  computed:{
   ...mapState({'新属性名称':'旧属性名称'})
  }
  
复制代码

二、使用modules(模块化)的state

1.直接使用

(1).在组件中直接使用
this.$store.state.模块名.属性名
(2).在模板中使用
$store.state.模块名.属性名
复制代码

2.使用map辅助函数调用

(1).不更改属性名使用
computed:{
   ... ...mapState('模块名',['属性名称'])
}
(2).更改属性名使用
computed:{
...mapState('模块名', {'新属性名称': '旧属性名称'})
}
复制代码

小结---->state的作用:保存公共数据(多组件中公用的数据),可以轻松实现多组件之间的传值

小结---->state是响应式的： 如果修改了数据，相应的在视图上的值也会变化

使用Vuex中的getters(计算属性)

使用直接调用的getters

1.直接使用

    this.$store.state.方法名称;
     
复制代码

2.map辅助函数

 computed: { 
  ...mapGetters(['方法名称']), 
  ...mapGetters({'新方法名字': '旧方法名称'})
}
复制代码

使用modules中的getters

1.直接使用

    this.$store.getters.模块名.方法名称
     
复制代码

2.map辅助函数

 computed: { 
   ...mapGetters('模块名', ['方法名称']), 
   ...mapGetters('模块名',{'新方法名字':'旧方法名称'})
}
复制代码

小结--->在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样)

vuex中的mutations(修改数据)属性

1.直接调用mutations

(1).直接使用
  this.$store.commit('mutation名', 参数)
  
  
(2).map辅助函数
  methods: { 
   ...mapMutations(['mutation名']), 
   ...mapMutations({'新名字': 'mutation名'})
 }
复制代码

2.使用modules中的mutations（namespaced:true）

 (1).直接使用
 
  this.$store.commit('模块名/mutation名', 参数)
  
 (2).map辅助函数
  methods: { 
   ...mapMutations('模块名', ['mutation名']), 
   ...mapMutations('模块名',{'新mutation名': 'mutation名'})
  }
复制代码

小结---->mutations的中文含义是：变异。 它是Vuex中用来修改公共数据的唯一入口。

注意 ! ! ! 在定义时--> 它的第一个参数是state，第二个参数是载荷

常见的问题

为什么是store.commit(′mutations的名字′)而不是store.commit('mutations的名字')而不是store.commit(′mutations的名字′)而不是store.mutations的名字()?

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler) 。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

数据不可以该在组件内部直接修改吗?

不能。虽然语法上不报错，也有响应式的特点。但是不推荐。特别是在严格模式下会报错。若将vue创建 store 的时候传入 strict: true, 开启严格模式,那么任何修改state的操作，只要不经过 mutation的函数，vue就会报错

可以传递多个数据吗？

参数只能有一个：下面的写法是不对的：
this.$store.commit('setUrl', url, host) //host这个参数将无法被接收到
 
如果希望传递复杂的数据，第二个参数可以是对象，例如下面的写法
this.$store.commit('setUrl', { url, host} )

vuex中使用actions(异步请求)

1.直接调用actions

(1).直接使用
  this.$store.dispatch('action名', 参数)
  
  
(2).map辅助函数
 methods: { 
   ...mapActions(['mutation名']), 
   ...mapActions({'新名字': 'mutation名'})
}
复制代码

2.使用modules中的actions（namespaced:true）

 (1).直接使用
 
  this.$store.dispatch('模块名/action名', 参数)
  
 (2).map辅助函数
  methods: { 
   ...mapActions('模块名', ['xxx']), 
   ...mapActions('模块名',{'新名字': 'xxx'})
 }
复制代码

小结---->我们可以使用Action来修改state，这一点是类似于 mutation的，不同在于：

-   action中可以通过调用 mutation来修改state，而不是直接变更状态。
-   action 可以包含**任意异步**(例如ajax请求)操作。
复制代码

注意 ! ! ! 在定义时--> 它的第一个参数是context对象会自动传入，它与store实例具有相同的方法和属性

调用Action方法发送异步请求更改state数据

  new Vuex.store({ 
     // 省略其他...
  actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
  action的名字: function(context, 载荷) {
    // 1. 发异步请求, 请求数据
  
    // 2. commit调用mutation来修改/保存数据
  
    // context.commit('mutation名', 载荷)
      }
    }
 })
复制代码

将ajax请求放在actions中有两个好处：

 -   代码得到了进一步封装。将发ajax和保存数据到vuex绑定在一起。
 -   逻辑更通顺。如果数据需要保存在Vuex的state中，那从接口处获取数据的操作就定义在Vuex的actions中