vuex 状态管理

最新推荐文章于 2024-07-21 22:54:00 发布

飞_持续更新在cnblogs

最新推荐文章于 2024-07-21 22:54:00 发布

阅读量203

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Dafei4/article/details/105909100

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue项目中实现状态管理，包括Vuex的基本目录结构设置、核心文件的编写，如actions、mutations和getters的具体应用，以及在main.js中注册Vuex并进行全局调用的方法。

摘要由CSDN通过智能技术生成

vuex 状态管理demo

01) 基本目录结构(自己创建)

src
--vuex
------actions.js
------getters.js
------index.js
------mutations.js

02) src/vuex/index.js 内容

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

import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex);

const state = { //demo 定义所需要的属性
    count: 10
};

const store = new Vuex.Store({
    state,
    mutations,
    actions,
    getters
});

export default store

03)src/vuex/mutations.js 内容

// mutations 同步函数
const mutations = {
    increment_vuex(state) {  //demo
        state.count++
    }
};

export default mutations

04)src/vuex/actions.js 内容

// actions 异步函数;提交使用dispatch

const actions = {};

export default actions

05)src/vuex/getters.js 内容

// 相当于计算属性 computed

const getters = {};

export default getters

06)src/main.js 注册vuex

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './vuex/index'

Vue.config.productionTip = false

Vue.prototype.$dafei = "我是自定义全局变量";

new Vue({
  render: h => h(App),
  router,
  store //demo
}).$mount('#app');

07)src/App.vue中使用

<template>
  <div id="app">
    {{ $route.meta.title}} ---我是元数据title
    <input type="button" value="点击vuex" @click="increment()">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app',
    methods:{
      increment() {
        // increment_vuex 为 src/vuex/index.js mutations中的方法
        this.$store.commit('increment_vuex');
        console.log(this.$store.state.count);
      }
    }
  }
</script>