vuex

大帅子
901 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

大家好,我是大帅子,今天讲一下vuex的一些基础的语法,只讲一些使用,还有注意点,全是干货我们直接冲

概括

首先我们应该知道我们应该什么时候用vuex,vuex是全局状态管理,vuex官网也说的很好,vuex你不必注意他是做什么的,当你要用到他的时候你自然就知道他是做什么的了,首先vuex里面有5个成员,我们逐一介绍

  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {}

1. state

就是在这个里面定义的数据,vue的所有组件都可以使用,具体语法如下

vue

  state: {
      user : {
          name:'张三',
          age:18
      }
  },

组件使用

this.$store.state.user.name   // 张三
$store.state.user.age     // 18
辅助函数
<script>
import { mapState } from "vuex";

export default {
  name: "Home",
  
  computed: {
    ...mapState(["user"])
  }
}
</script>

导入了辅助函数之后就可以直接用

user.name   // 张三
user.age    // 18

2.getters

getters其实并没有过多的介绍,就相当于是vue中的计算属性computed

vuex

info(state) {
    console.log('getters')
    return `我的名字叫做${state.user.name} 我的年纪${state.user.age}`
 }

组件

 <h3>简介: {{ $store.getters.info }}</h3>
辅助函数
<script>
import { mapGetters } from "vuex";

export default {
  name: "Home",
  
  computed: {
   ...mapGetters(["info"])
  }
}
</script>

导入了辅助函数之后就可以直接用

<h3>简介(mapGetters): {{ info }}</h3>

3.mutations

语法: this.$store.commit('mutation名', 载荷实参 )

这个就厉害了,所有的state里面的数据,只能通过mutations来修改

组件

 <p><button @click="doClick">改变数据</button></p>
 
   doClick() {
      this.$store.commit("updated", {
        name: "大帅子",
        age: 100,
      });
    },

vuex

mutations: {
  // state 就是 state里面的数据 , payload就是载荷 通常就是一个对象
    updated(state, payload) {
      state.user = payload
    },
}

4. actions

语法: this.$store.dispatch('actions的名字', 参数)
步骤:
  1. 组件提交actions异步更新 this.$store.dispatch('actions的名字', 参数)
  2. actions 发送异步请求,但是里面只能看不能改
  3. 提交给 mutations , context.commit('mutations函数名',要修改的数据)
  4. mutations 里面就可以直接修改数据了

image.png

工作流程 :

image.png

  • 1.actions与mutations相同点 ：都是修改state数据

  • 2.actions与mutations不同点

    • mutations：同步更新
    • actions: 异步更新（例如你的数据来源于ajax）
    1. 注意点
    • actions里面不能直接修改数据 ,
    • 主要就是发送axios请求,以防代码冗余
    • vuex中没有vue的实例,调用不了axios 的方法,我们要手动导入

组件

<button @click="doClick111">点我发送axios请求</button>


doClick111() {
      this.$store.dispatch("getList");
  }

vuex

//导入axios
import axios from "axios";

// 先定义一个空数组准备接收
state : {
    list : []
}

// 这里我们注意 , vuex里面没有this 所以我们要导入axios

 actions: {
    async getList(context) {
      const { data: res } = await axios.get('/getBooks')
      console.log(res);
      context.commit('getBooks', res.data)
    }
}

modules

modules主要就是,模块化的,这个大型项目用的很多,但是vue2也不支持很大型的项目,所以这个用的还是比较少,但是我这边还是给大家提一下

store/index.js

// 导入子模块
import user from './user'

 modules: {
    user
  }

子模块 store/user.js

import Vue from "vue";
import Vuex from "vuex";
//导入axios
import axios from "axios";

Vue.use(Vuex);

export default {
  namespaced: true,
  state: {
    list: [],
  },
  getters: {},
  mutations: {
    getBooks(state, payload) {
      state.list = payload;
    },
  },
  actions: {
    async getList(context) {
      const { data: res } = await axios.get("/getbooks");
      console.log(res);
      context.commit("getBooks", res.data);
    },
  },
  modules: {},
}

我们使用的时候组件之后的时候自己在前面多加一个组件名就直接用,其他用法一致

avatar
文章
阅读
粉丝