新人不得不看Vuex核心内容

vuex核心内容

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化简单来说就是一个统一状态的管理工具

我们的主要是为了我们后期的代码的维护

那么在何时使用vuex呢，用官方文档的一句话是

 Flux 架构就像眼镜：您自会知道什么时候需要它。

建议大家尽量在多人开发中使用vuex

Vuex的核心思想

• state
• mutation
• action

这三个东西组成了Vuex的核心内容
·

1.1.1. 流程

1. 在组件中使用state中的数据
2. 在组件端的生命周期或者原生事件中分发（dispatch）对应的action
3. action中进行异步请求，请求后台接口获得对应的数据
4. 将数据提交（commit）给对应的mutation
5. mutation接收到对应的数据后，设置state
6. state一旦被修改，自定渲染到使用该state的组件
   在mutation中尽可以只做state设置的操作，保证mutation功能的单一性，可以组合提交多个mutation实现功能

我们看下在Vue-Cli中如何生成Vuex

我们首先先生成和配置一个带有vuex的项目

我们接下来下载之后我们要配置我们的项目

我们选择以下配置

然后一路回车直到这个页面

我们看看我的vuex都有那些部分
首先是我们的入口文件

然后我们看我们的store里的index

1.2 基础模板

scr/store/index.js

const store = new Vuex.store({
 state: {}
 mutaions: {}
 actions: {}
 gettres: {}
 modeles: {}
})
export default store

main.js

import store from 'store的路径'

new Vue ({
store,
...
})

1.3 state

我们应该把组件中的数据存放在state中，组件中需要使用state的位置，去获得对应的state即可

1.3.1如何设置state

new Vuex.Store({
state: {
  key: 'value'
}
})

1.3.2如何在组件中使用state

1.3.2.1 直接使用

直接在组件模板或者组件的js里通过’$store.state.key '的方式去使用

1.3.2.2 利用computed优化

在computed中定义一个计算数据，建议名字和key的名字相同

{
computed: {
key() {
  return this.$store.state.key
}

}

}

1.4 mutations

在store的配置里，我们可以创建mutation

new Vuex.Store({
  state:{
   mag:""
  }
})
-----------------
mutations: {
自定义的mutation名字 （state, payload）{
state.mag = payload
}

}

1.4.2 如何使用mutation

一种方法，在组件中进行 commit 操作，或者在 action 中进行 commit 操作（这种方式具体见 action的用法章节）

<template>

  <div>
    <button>点击修改</button>
</div>
</template>

<script>
export default {
methods: {
  change () {
      this.$store.commit('自定义的mutation名字','传递的数据')
  }
}
}

<script>

mutaion 中只能进行同步操作！！！！！不要出现异步操作！要记好

1.5.1 action

我们可以在action中进行异步操作

1.5.1 如何创建action

在store的配置里，我们可以创建我们action

new Vuex.Store({
  state: {
   mag:""
  },
   mutaions: {
    setMag(state,payload) {
	    // state是固定写法，用state可以直接修改state 例如         staet.msg = "值"
	      // payload是参数（载荷） 当我们在提交mutation的时候可以传递参数 commit('mutation', 载荷实际的数据)
      state.mag=payload
   }
 
 },

 actions: {
    getMag({commit},payload){
     return axios.get("url").then(res => {
        // 将res.data设置给state
        commit('setMsg', res.data) // 这里的commit通过解构第一个参数得到。这个参数中包含以下内容： commit dispatch state rootState getters rootGetter
        // 这里的state不能修改，只提供获取state中数据的功能

        // 在action中也可以dispatch其他的action
        dispatch('action', payload)
      })

     
   }
}
})

1.5.2.如何使用action

利用‘this.$store.dispatch’可以实现action的执行

this.$store.dispatch("getMag","参数")

1.5.2.1如何确保我们dispatch中的异步操作结束后执行代码

this.$store.dispatch('action的名字',"参数").then(()=>{
     // 如果想要让这个函数在异步结束后执行，需要在对应的action将promise对象return出去
})

actions: {
  getMsg ({commit}, payload) {
    return axios.get("url").then(res => {})
  }
}

我们要养成 return 的习惯

vuex的核心今天就先到这里
希望对看到这里的同学有一点点帮助和成长

求求了给个三联叭