Vuex之state学习（Vue3）

在一个已经初始化的项目里，安装vuex：

npm install vuex

首先来看一下目录结构：

在store文件夹下有一个index.js文件，里面的内容是：

import { createStore } from 'vuex'

import { jinzw } from '@/store/module/jinzw'
export default createStore({
  modules: {
    jinzw
  }
})

为了便于维护，一般不把定义的vuex直接定义写在store/index.js文件里，更好的方式是定义在一个独立的js文件，然后import导入到modules的方式组织代码。
 

在store/module目录下，我新建了一个jinzw.js的文件，里面是这样的一段代码：

export const jinzw = {
  /*命名空间，假定在某一个页面要用state里面的状态值，可以这样调用：*/
  /* 即： $store.state.jinzw.myNum                        */
  namespaced: true,                   
  ,
  state: { 
      /* 存放业务状态数据，跨组件都可以调用，不需要借助父子组件传参的方式 */
      myNum: 0
  },
  getters:{
     /* 在获取state的数据前给调用者展示前，在这里对数据加工 */
     /* 对state数据直接处理然后直接return 这里也可以修改state里的值，但是这样做很奇怪 */
     getCounter(state){
        return state.myNum + 520
     }
  },
  mutations: {
     /* mutations是用于定义操作state中数据的方法,有点类似于后端静态方法 */ 
     /* 支持传入参数，第一个参数是state，第二个参数是可选参数，随便定义   */
     /* 调用方通过commit来调用某一个方法：                           */
     /* 即：this.$store.commit('jinzw/delNum', 1)                */
     /* 因为我使用了命名空间，所以在commit时，需要把jinzw传入          */
    
     delNum(state, minusVal){
        console.log("mutations的delNum函数触发")
        state.myNum = state.myNum - minusVal;
     }
  },
  actions: {
     /*在这里定义的function是做异步处理的         */
     /* function可以接收参数，我放了一个对象       */
     asyncAdd(context, specParams){
          console.log("actions的 asyncAdd 函数触发 输入参数:" + specParams)
          setTimeout(()=>{
            context.commit('delNum', specParams.count)  
          }, 5000)
     }
  }
}

我定义了一个执行异步操作的函数asyncAdd（实际是减..），放在actions里面。那么怎么调用它呢，很简单用$store.dispatch去调用，即：

let params = {key: 9239293, count: 1}

this.$store.dispatch('jinzw/asyncAdd', params)

跟$store.commit一样，因为使用了命名空间，所以要加命名空间名字jinzw在方法前面。