vuex使用总结

原创已于 2022-01-26 09:06:47 修改 · 404 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-01-25 17:22:05 首次发布

vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何在Vue项目中集成Vuex状态管理库，并通过实例演示如何在多个组件间共享和管理状态。涵盖安装配置、核心概念如state、mutations、actions及getters的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

npm install vuex --save

main.js文件引入上面安装的vuex：

// 引入store对象
import store from './store/store.js'
new Vue({
  router,
  // 集成到vue中
  store,  
  render: h => h(App),
}).$mount('#app')

在src文件夹下创建store文件夹，在store文件夹下创建store.js文件。
这个路径和文件名称要和main.js里的import store路径一致。
store.js文件基本结构：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

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

（1）state：共享的全局变量，类似存储全局变量的数据
（2）mutations：为actions提供存储设置state数据的方法.
Vuex 中 store 数据改变的唯一方法就是提交 mutations。mutations里面装着一些改变数据方法的集合，把处理数据逻辑方法全部放在 mutations 里面，使得数据和视图分离。Vuex 中的 mutations 非常类似于事件，每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler)。
（3）actions：对外提供改变state的方法。内部调用mutations提供的方法。
由组件中的

this.$store.dispatch('action 名称', 变量值data)

来触发状态改变的方法，data为需要传进来的参数。
然后由commit()来触发mutation的调用 , 间接更新state。
（4）getters：提供用来获取state数据的方法。在组件中

this.$store.getters.getter内方法名称;

来获取状态值。

应用

多个组件共享变量

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        controlData: {},
    },
    mutations: {
        // state是全局变量，data是actions传递过来的数据
        setStateControlData(state, data){
            //将传参设置给state的controlData
            state.controlData = data;
        }
    },
    actions: {
        setControlData({commit,state}, data){
            commit("setStateControlData", data);
        }
    },
    getters: {
        // 获取state的controlData
        getControlData(state){
            return state.controlData;
        }
    }
})
export default store;

组件一改变state的controlData 值，组件二获取。
组件一：

 methods: {
       test(){
           this.$store.dispatch('setControlData', this.text);
       }
   },

组件二：

 computed: {
     text:function () {
         return this.$store.getters.getControlData;
     }
 },