快速了解Vuex - 技术栈

Vuex

Vuex
使用Vuex

Vuex

📌vuex 是一个专为 Vue.js 应用程序开发的状态管理库

📌vuex 可以在多个组件之间共享数据，并且共享的数据是响应式的，即数据的变更能及时渲染到模板

📌vuex 采用集中式存储管理所有组件的状态（将公用的数据提取出来集中存储）

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

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

使用Vuex

使用需要创建带有vuex功能的脚手架工程

创建好之后就是一个基础的index.js文件

js 复制代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

如何定义共享数据:

js 复制代码

  state: {
      name: '你好'
  },

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

html 复制代码

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

如何修改共享数据

js 复制代码

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

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

js 复制代码

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

如果要进行异步操作

数据不是我们指定的，需要axios请求后端

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

js 复制代码

  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中定义的函数

js 复制代码

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

附录：注意

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

js 复制代码

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