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>
4.效果
