【Vue】Vuex详解

【Vue】Vuex详解

定义一个vuex文件

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num1:0,
    str1:''
  },
  getters: {
    // getters是对state的一种加工函数，但不能改变state中的数据，state有着严格的修改方式。
    /**
     * 
     * @param {*} state 平级的state属性
     * @param {*} getters 平级的getters
     * @param {*} rootState 如果是modules中的配置的，则为上下文中state属性
     * @param {*} rootGetters 如果是modules中的配置的，则为上下文中getters属性
     */
    getNum1:(state,getters,rootState,rootGetters)=>{
      // console.log(state,getters,c,d,e);
      return state.num1 + 100;
    }
  },
  mutations: {
    // mutation是对state更改唯一方式，正是因为这种严格的修改方式，才能使得state中的状态修改是可预期的
    /**
     * 
     * @param {*} state state数据
     * @param {*} payload 调用commit时传入的参数
     */
    setNum1:(state,payload)=>{
      state.num1 = payload;
    }
  },
  actions: {
    // actions一般是处理异步操作的数据,修改state的数据只能通过mutations，不能改变state中的数据
    /**
     * 
     * @param {*} context 
     * @param {*} payload 
     */
    setNum1Async({state,rootState,getters,rootGetters,commit,dispatch},payload){
      setTimeout(() => {
        commit('setNum1',payload)
      }, 2000);
    }
  },
  modules: {
    // 开启为true的情况下，调用modules中的方法或者数据需要加上modules名称
    userModule:{
      namespaced:true,
      state:{
        username:"你前进的脚步，只有自己听得到"
      },
      getters:{
        getRootNum1(state,getters,rootState,rootGetters){
          return rootGetters.getNum1+1001;
        }
      },
      mutations:{
        setRootNum1(state,payload){
          // 只能处理当前module数据
        },
        setUsername(state,payload){
          state.username = '对未来最大的慷慨就是把一切献给现在'
        }
      },
      actions:{
        setRootNum1({state,rootState,getters,rootGetters,commit,dispatch},payload){
          console.log(123456);
          commit('setRootNum1',payload) //局部调用
          commit('setNum1',20000,{root:true}) // 全局调用
        },
        rootAction:{
          root:true,
          handler(nameSpaceContent,payload){
            console.log(nameSpaceContent);

          }
        }
      }
    }
  }
})

1. state

---

定义

state: {
    num1:0,
    str1:''
  },

使用

直接引用

{{$store.state.num1}} // 全局

辅助函数

computed:{
    // 全局数组方法引入state
    ...mapState(['num1']),
    // 以对象方式引入，可以重新起名
    ...mapState('userModule',{
      num11(){
        return this.$store.state.userModule.username;
      }
    }),

2. getters

---

定义

getters: {
    // getters是对state的一种加工函数，但不能改变state中的数据，state有着严格的修改方式。
    /**
     * 
     * @param {*} state 平级的state属性
     * @param {*} getters 平级的getters
     * @param {*} rootState 如果是modules中的配置的，则为上下文中state属性
     * @param {*} rootGetters 如果是modules中的配置的，则为上下文中getters属性
     */
    getNum1:(state,getters,rootState,rootGetters)=>{
      // console.log(state,getters,c,d,e);
      return state.num1 + 100;
    }
  }

使用

直接引用

<p>getter{{ $store.getters.getNum1 }}</p>

辅助函数，在computed中使用

computed:{
    // 引入getter
    ...mapGetters('userModule',['getRootNum1']),
    ...mapGetters(['getNum1'])
  }

3. mutations

---

定义

mutations: {
    // mutation是对state更改唯一方式，正是因为这种严格的修改方式，才能使得state中的状态修改是可预期的
    /**
     * 
     * @param {*} state state数据
     * @param {*} payload 调用commit时传入的参数
     */
    setNum1:(state,payload)=>{
      state.num1 = payload;
    }
  }

使用

js中使用

this.$store.commit('setNum1',10000);

辅助函数

...mapMutations('userModule',['setUsername'])

4. actions

定义

actions: {
    // actions一般是处理异步操作的数据,修改state的数据只能通过mutations，不能改变state中的数据
    /**
     * 
     * @param {*} context 
     * @param {*} payload 
     */
    setNum1Async({state,rootState,getters,rootGetters,commit,dispatch},payload){
      setTimeout(() => {
        commit('setNum1',payload)
      }, 2000);
    }
  }

使用

js

this.$store.dispatch('setNum1Async',10002)

辅助函数

...mapActions('userModule',['setUsernameAsync']),

5. modules

module意思为模块，当我们的项目比较大时，统一的数据状态不好管理时，可以分模块来管理，比如user模块、汽车模块、城市模块等等，开启namespaced:true后，就可以单独的使用了

定义

modules: {
    // 开启为true的情况下，调用modules中的方法或者数据需要加上modules名称
    userModule:{
      namespaced:true,
      state:{
        username:"你前进的脚步，只有自己听得到"
      },
      getters:{
        getRootNum1(state,getters,rootState,rootGetters){
          return rootGetters.getNum1+1001;
        }
      },
      mutations:{
        setRootNum1(state,payload){
          // 只能处理当前module数据
        },
        setUsername(state,payload){
          state.username = '对未来最大的慷慨就是把一切献给现在'
        }
      },
      actions:{
        setRootNum1({state,rootState,getters,rootGetters,commit,dispatch},payload){
          console.log(123456);
          commit('setRootNum1',payload) //局部调用
          commit('setNum1',20000,{root:true}) // 全局调用
        },
        rootAction:{
          root:true,
          handler(nameSpaceContent,payload){
            console.log(nameSpaceContent);

          }
        }
      }
    }
  }

使用：

export default {
  computed:{
    // 全局数组方法引入state
    ...mapState(['num1']),
    // 以对象方式引入，可以重新起名
    ...mapState('userModule',{
      num11(){
        return this.$store.state.userModule.username;
      }
    }),
    // 引入getter
    ...mapGetters('userModule',['getRootNum1']),
    ...mapGetters(['getNum1']),
    // 引入mutation

  },
  methods:{
    ...mapMutations('userModule',['setUsername']),
    ...mapActions('userModule',['setUsernameAsync']),
    setUsername1(){
      this.setUsername()
    }
  }
}

直接使用和上述差不多只是需要加上module名称，如

this.$store.state.userModule.XXX
this.$store.getters['userModule/getRootNum1']
this.$store.commit('userModule/setUsername',payload)
this.$store.dispatch('userModule/setUsernameAsync',payload)

6. 局部模式下注册全局actioon

{
  actions: {
    someOtherAction ({dispatch}) {
      dispatch('someAction')
    }
  },
  modules: {
    foo: {
      namespaced: true,

      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... } // -> 'someAction'
        }
      }
    }
  }
}

未完待续。。。。