快速了解Vuex

Vuex

📌vuex 是一个专为 Vue.js 应用程序开发的状态管理库
📌vuex 可以在多个组件之间共享数据，并且共享的数据是响应式的，即数据的变更能及时渲染到模板
📌vuex 采用集中式存储管理所有组件的状态（将公用的数据提取出来集中存储）

进行安装：
npm install vuex@next --save

state：状态对象，集中定义各个组件共享的数据
mutations：类似一个事件，用于修改共享数据，要求必须是同步函数
actions：类似于mutation，可以包含异步操作，通过调用mutation来改变共享数据

---

使用Vuex

使用需要创建带有vuex功能的脚手架工程
创建好之后就是一个基础的index.js文件

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {},getters: {},mutations: {},actions: {},modules: {}
})

如何定义共享数据:

  state: {name: '你好'},

这样在我们的页面中就会展示出定义的共享数据
如何展示呢

<div id="app">{{$store.state.name}}
</div>

如何修改共享数据

mutations:{setName(state,Newname){state.name=Newname}
}

那么如何修改，修改需要通过事件调用函数进行改变

methods: {handleUpdate(){//第一个参数是对应的函数名称，第二个是参数this.$store.commit('setName','我好')}
}

• 如果要进行异步操作

数据不是我们指定的，需要axios请求后端
就像初始界面，我们登录进去会显示谁谁谁你好，这个数据就是后端提供的
需要在actions中进行定义方法

  mutations: {},actions: {setNameaxios(context){axios({url: '/login',method: 'post',data: {username: 'hlh',password: '123456'}}).then(res=>{if(res.data.code==1){context.commit('setName',res.data.data.name)}})}},

其中的context是一个上下文对象，通过它可以调用store中的上下文
同样也需要监听函数进行调用调用actions中定义的函数

methods: {handleUpdate2(){//第一个参数是对应的函数名称，第二个是参数this.$store.dispatch('setNameaxios')}
}

附录：注意
发送请求就涉及到了跨域问题，在前端代码中我们可以在vue.config.js文件中配置代理

  devServer:{port: 8081,proxy:{'/login':{target:'http://localhost:8080'}}}