vuex五个函数总结

1. state

state用于存储各大组件需要共用的数据变量，数据一般直接定义在store.js中的state:{}里面；如：

export default new Vuex.Store({
  state: {
    count: 0
  }
}

调用state中存储数据方法：

方法1：通过 this.$store.state.count直接调用:

当前最新Count值为：{{this.$store.state.count}}

方法2：通过mapState辅助函数:

(1):先从vuex中按需引入mapState函数:

import {mapState} from 'vuex';

(2): 通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：

2. mutations

state中存储的数据可以直接调用，但是不建议直接修改，直接通过this.$store.state.count修改数据无法被dextools追踪，即当state中数据调用者较多时，无法了解实际上数据被谁改变。所以推荐使用mutations函数。
(注意：mutations函数为同步改变state中数据，无法执行异步操作，异步操作需使用actions函数)
在mutations里面定义函数，如下：

const store = new Vuex.Store({
    // state中存放的就是全局共享数据
    state:{
        count: 0
    },
    //定义的函数会有一个默认参数state，这个就是存储在Store中的state对象。
    mutations: {
      add(state, params) {
        state.count += params
      }
    }
 })

调用mutations中存储函数方法：

方法1：通过 this.$store.commit('add', ...args)直接调用; 'add'表示方法名，...args表示所有需要传递的参数。

{{$store.state.count}}

方法2：通过mapMutations辅助函数:

(1):先从vuex中按需引入mapMutations函数:

import {mapMutations} from 'vuex';

(2): 通过刚才导入的mapMutations函数，将当前组件需要的全局函数，映射到当前组件的methods方法里面：

(mutations_type.js内容可做了解)

3. actions

mutation函数中只能同步修改state中数据，强制使用时，devtools中也无法追踪到数据改变。所以推荐使用actions进行异步操作state中数据。
在actions中定义函数如下：

const store = new Vuex.Store({
    // state中存放的就是全局共享数据
    state:{
        count: 0
    },
    mutations: {
      //定义的函数会有一个默认参数state，这个就是存储在Store中的state对象。
      add(state, params) {
        state.count += params
      }
    },
    actions: {
      //定义的函数会有一个默认参数context，context是和store对象具有相同方法和属性的对象,但他们不是同一个对象。
      asyncAdd(context, params){
        setTimeout(()=>{
          context.commit('add', params)
        },1000)
      }
    }
 })

调用actions中存储函数方法：

方法1：通过 this.$store.dispatch('asyncAdd', ...args)直接调用; 'add'表示方法名，...args表示所有需要传递的参数。

{{$store.state.count}}

方法2：通过mapActions辅助函数:

(1):先从vuex中按需引入mapActions函数:

import {mapActions} from 'vuex';

(2): 通过刚才导入的mapActions函数，将当前组件需要的全局函数，映射到当前组件的methods方法里面：

4. getters

getters用于对state中的数据进行处理包装，返回新的数据进行存储，但是它并不会对state中的数据进行改变，且随着state中的数据改变而改变。
在getters中定义函数如下:

const store = new Vuex.Store({
    // state中存放的就是全局共享数据
    state:{
      count: 0,
      numList: [2, 4, 6, 8, 10]
    },
        getters: {
          filterNumList(state){
            return state.numList.filter(item=>item>5)
          }
        }
 })

调用getters中存储数据方法：

方法1：通过 this.$store.getters.filterNumList直接调用:

方法2：通过mapGetters辅助函数:

(1):先从vuex中按需引入mapGetters函数:

import {mapGetters} from 'vuex';

(2): 通过刚才导入的mapGetters函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：

5. modules

当项目较为复杂，需要存储的变量较多，杂糅在一起就不易于管理。对每个部分的store里面存储的数据、函数进行抽离分成不同的模块，易于区分与管理数据。

项目根目录.png

在cart.js和products.js两个部分中分别抽离出这两个部分对应的state、mutations、actions、getters，根据namespaced: true来设置根据module名来调用module中的方法。

cart.js代码如下：

export default {
  namespaced: true,
  state: {
    name: '我是cart.js里面的state下面的name',
    count: 0
  },
  mutations: {
    add(state){
      state.count ++;
    }
  },
  actions: {},
  getters: {}
 }

products.js代码如下：

export default {
  namespaced: true,
  state: {
    name: '我是products.js里面的state下面的name',
    count: 0
  },
  mutations: {
    add(state){
      state.count ++;
    }
  },
  actions: {},
  getters: {}
 }

index.js(store.js)代码如下(index.js中的四个函数也可分别抽离出去作为一个单独的js文件，但是为了避免查找不同函数中的变量名、函数名，分模块后，建议就不要再继续抽离成单独的js文件了)：

import Vue from 'vue'
import Vuex from 'vuex'
import CartModule from './modules/cart.js'
import ProductsModule from './modules/products.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add(state) {
      state.count++
    },
  actions:{},
  getters:{}
  },
  modules: {
    cart: CartModule,
    products: ProductsModule
  }
})

调用实例: