Vuex 的使用

最新推荐文章于 2024-09-30 16:11:43 发布

Debug_Name

最新推荐文章于 2024-09-30 16:11:43 发布

阅读量40

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_38534887/article/details/130842145

版权

安装
npm install vuex --save
如果安装报错的话,指定vuex版本即可 , npm install vuex@3.1.3 -S

创建配置文件

在 src 目录下创建一个名为 store 的目录并新建一个名为 index.js 文件用来配置 Vuex
state：全局state对象,用于保存所有组件的公共数据
getters：监听state值的最新状态（计算属性）
mutations：唯一可以改变state值的方法(同步执行)
actions：异步执行mutations方法
修改 main.js 增加刚才配置的 store/index.js



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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        routes: []
    },

    mutations: {
        initRoutes(state, data) {
            state.routes = data;
        }
    },
})

第三步在main.js中导入刚刚写的配置文件jsstore/index.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'//1. 添加刚刚的文件,只要添加目录即可,里面的js自动引入

// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

import {postRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {getRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";

//插件
Vue.prototype.postRequest = postRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.getRequest = getRequest;
Vue.prototype.deleteRequest = deleteRequest;

new Vue({
    router,
    store,// 2. 这里添加 刚刚导入的store
    render: h => h(App)
}).$mount('#app')