vuex的基本使用

vuex是vue独立于组件系统之外的状态管理工具,可以实现公共数据共享,跨组件通讯,并且有响应式的特点

新项目创建的时候可以直接自定义vuex,老项目需要下载配置

下载: npm install vuex@3.6.2 使用vue2就下载3的版本,vue3就下载4

vuex有五个方法,跟vue中的功能类似

1.state 作用:统一定义公共数据(类似于data(){return{a:1,b:2}}

定义格式:   state:{ 
     变量名:""
    };
使用:this.$store.state.变量名    

2.mutations 作用:使用它来修改数据(类似于methods),vuex所有数据修改都要通过mutations

定义格式:  mutations:{
  // 对象里面是函数.跟methods格式差不多
  modName(state,newName){
    state.count = newName    //小花
  }
  }
  使用:this.$store.commit("modName","小花")

3.getters 作用:类似于computed(计算属性,对现在的状态进行计算得到新的数据

定义格式:  new Vuex.store({
  // 省略其他...
  getters: {
    // state 就是上边定义的公共数据state
    getter的名字1: function(state) {
      return 要返回的值
    }
  }
})
使用 this.$store.getters.名字

4.actions 作用:发送异步请求

定义格式:  new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    action的名字: function(context, 载荷) {
      // 1. 发异步请求, 请求数据
      
      // 2. commit调用mutation来修改数据
      
      // context.commit('mutation名', 载荷)
    }
  }
})
this.$store.dispatch('名字',实参)

5.modules 作用:模块拆分,可以将模块放入一个新的文件中,然后引入在modules中注册使用

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
  	模块名1： {
    		// namespaced为true，则在使用mutations时，就必须要加上模块名
      	namespaced: true, 
  		  state: {},
                getters: {},
                mutations: {},
                actions: {},
                modules: {}
  	}，
    模块名2： {
        // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
  		  state: {},
                getters: {},
                mutations: {},
                actions: {},
                modules: {}
  	}  
  }
})