vue2中vuex详细使用

1.安装

说明：@也就是版本号，一般vue2安装vuex3。

npm i vuex@3.6.2

2.搭建架子

执行流程如下：

1. 初始化状态：在state对象中定义了一个名为message的属性，并将其初始值设置为"启动"。

2. 定义变更函数（mutations）：在mutations对象中定义了一个名为SET_MESSAGE的函数，该函数接受两个参数：state和message。SET_MESSAGE函数的作用是将state对象的message属性设置为传入的message值。

3. 定义异步操作（actions）：在actions对象中定义了一个名为setMessage的函数，该函数接受两个参数：commit和message。setMessage函数的作用是调用commit方法并传入'SET_MESSAGE'作为第一个参数，以及传入的message作为第二个参数。这样，commit方法会将SET_MESSAGE函数应用于当前模块的状态。

2.1main.js

说明：导入store并注册在new Vue()里面。

import Vue from 'vue';

import 'element-ui/lib/theme-chalk/index.css';
import { install } from '@icon-park/vue/es/all';
import '@icon-park/vue/styles/index.css';
import ElementUI from 'element-ui';

import router from "./router/index.js"

import store  from "./store/index.js";

import App from './App.vue';
//全局引入echarts
// import * as echarts from 'echarts';

Vue.use(ElementUI);
Vue.use(install)
//导入api文件
import * as API from "@/api"

new Vue({
  el:"#app",
  router,
  store,
  beforeCreate() {
    // 挂载vue实例原型身上,一般自己添加的原型都以$命名
    Vue.prototype.$API = API;
    // Vue.prototype.$Echarts=echarts
  },
  render:(h)=>h(App),
}).$mount();

?2.2index.js

import Vue  from "vue";
import Vuex from "vuex"
import user from "./modules/user"
Vue.use(Vuex)

export default new Vuex.Store({
 modules:{
     user
 }
})

2.3user.js

说明：

• actions里面的所有的方法，第一个参数其实就是一个小型的state，第二个参数其实就是前端页面通过dispath传递过来的值。下面是我通过解构的方法得到的commit方法，然后触发mutations里面的方法从而修改state里面的值。
• ?namespaced属性是命名空间的主要目的是避免状态和变更函数之间的命名冲突。当在一个大型应用程序中使用多个组件时，每个组件可能都有自己的状态和变更函数。如果没有命名空间，这些组件可能会使用相同的状态或变更函数名称，导致冲突和意外的行为。

// user.js
const state = {
    // 仓库
    message: "启动",
};
// 修改state数据
const mutations = {
    SET_MESSAGE(state, message) {
        state.message = message;
    },
};
//异步
const actions = {
    setMessage({ commit }, message) {
        commit('SET_MESSAGE', message);
    },
};

export default {
    namespaced: true,
    state,
    mutations,
    actions,
};

3.测试Demo?

说明：

• $store?是 Vuex 实例的引用，它提供了访问整个应用程序状态的方法。（操作过于复杂）
• mapState辅助函数通过映射的方法，它是一个函数，用法如下：

<template>
<div><div>vuex使用</div>
  <button @click="change1"> {{ good }}</button>
  <div>{{$store.state.user.message}}</div>
  <div>{{user}}</div>
</div>
</template>

<script>
import {mapActions, mapMutations, mapState} from "vuex"

export default {
  data(){
    return{
      good:"点击我修改数据"
    }

  },
  methods:{
    ...mapMutations({
      SET_MESSAGE:'user/SET_MESSAGE'
    }),
    ...mapActions({
      setMessage:"user/setMessage"
    }),
    change1(){
      // this.$store.dispatch("user/setMessage","传递数据来了")
      this.setMessage('数据来了')
    }

  },
  computed: {
    //对象的写法
    ...mapState({
      message: state => state.user.message, //里面的具体数据
      user:"user"  //整个user中的state数据,

    }),


  }
}
</script>

4.效果?

?