[log]vuex使用，了解一下

最新推荐文章于 2023-06-22 21:27:15 发布

原创最新推荐文章于 2023-06-22 21:27:15 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用Vuex进行状态管理，包括设置初始状态、定义修改状态的方法（mutations）、并展示了如何在组件中更改和获取store中的值。

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

Vue.use(Vuex)

const store = new Vuex.Store({
    // 定义消息，用来组建之间进行消息传递
    state: {
        message: {     
            text: '',         
        },
    },
    mutations: {
        setMessage (state, msg){
            state.message = msg
        },
  })
  
  export default store

更改store的值

 this.$store.commit('setMessage', message);

获取sotre的值

 watch: {
    getMessage: function(message1){
      this.chatData.push(message1);  // 获取store的之   
    }
  },
  computed: {
    getMessage(){
      return this.$store.state.message;
    }
  },