vue2中vuex详细使用

1.安装

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

npm i vuex@3.6.2

2.搭建架子

执行流程如下：

初始化状态：在state对象中定义了一个名为message的属性，并将其初始值设置为"启动"。
定义变更函数（mutations）：在mutations对象中定义了一个名为SET_MESSAGE的函数，该函数接受两个参数：state和message。SET_MESSAGE函数的作用是将state对象的message属性设置为传入的message值。
定义异步操作（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>