vuex状态管理的基本使用

• 通过npm安装vuex

npm install vuex --save

• 使用vuex

import Vuex from 'vuex'
Vue.use(Vuex)
//赋值给一个变量，然后引入
let store = new Vuex.Store({
    ...
})
//为了更好的维护，且体现模块化，可以写在别的js文件中，然后导入
import store from './store'     //创建一个store文件夹，默认为文件夹下的index.js文件
new Vue({
  ...
  store,   
  ...
})

• 使用vuex基本结构

new Vuex.Store({
  //状态
  state: {
    count: 100
  },
  //将状态装饰，或刷选，以想要的结果输出
  getters: {
    hasUnit () {
      return this.state.count.filter(count => count + 1)
    }
  },
  //可以理解为变更状态的方法，第一个参数为state，可以再添加自定义参数，注意：只能进行同步
  mutations: {
    increment (state) {
      state.count++
    }
  },
  //可控制的提交mutation事件，弥补mutation无法异步
  actions: {
    increment (state) {
      setTimeout(() =>
        state.commit('increment'), 30)
    }
  }
})

为了更好的维护，往往将store文件写成以下结构 ，名字自定义，但是需要知道每个文件的作用

index.js:主要作为导出store，作为汇总的文件

state.js：作为定义的变量集合，作为一个对象导出

getters.js：作为主要是获取state中变量值的方法，return出state相应的值，或者length等等的一些state变量的信息

mutations-type.js: 作为一些方法等命名的变量，防止书写错误

mutaintions.js:存放修改state变量的同步方法，这里可以的方法名就是用了mutations-type.js中的变量命名，[object.value]这种方式是ES6中的语法

action.js：存放修改state变量的异步方法

在组件中引用，不使用mapXXXXX辅助函数情况下

• state和getter：直接在computed计算属性中使用

 computed: {
    count () {
      return this.$store.state.count
    }，
    hasUnit () {
      return this.$store.getters.hasUnit 
    }
  }

•  mutations和actions则被作为事件调用，可以放在methods，watch等等，有事件调用的时候都可以

methods: {
    add () {
      this.$store.commit('increment')    // mutations使用commit调用
    },
    asyncAdd () {
      this.$store.dispatch('increment')  // actions使用dispatch调用
    }
  }

通过mapXXXX辅助函数来引用 

• 先确保组件中已导入vuex的相应辅助函数：用到哪个导入哪个

import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'
//导入多个：ES6模块
import { mapState, mapGetters } from 'vuex'

• 然后根据你的需求使用对应的辅助函数，前提是已经导入

  computed: {
    ...mapState([
      'count'
    ]),
    ...mapGetters([
      'addUnit'
    ])
  }
//使用this.count, this.addUnit

methods: {
    ...mapMutations([
       'increment'
    ]),
    ...mapActions({
       addNum: 'increment'
    })
    add () {
       this.increment()
    }
}
//可以被当做事件调用,为了避免命名冲突，可以使用重命名，需要使用{}而不是[]

模块：Module

• 当项目很大的时候，很多版块在一起容易混淆，希望每个版块的信息归每个版块下面，易于维护

//局部模块引用的第一个参数state都是自己模块里的
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

• 以moduleA为例 ,可以新建一个JS文件，然后通过import导入到总的vuex管理中

const state = {
  count: 1
};
const getters = {
  get(state) {
    return state.count;
  }
};
const mutations = {
  add(state) {
    state.count++;
  },
  reduce(state) {
    state.count--;
  }
};
const actions = {
  add: ({ commit }) => {
    commit("add");
  },
  reduce: ({ commit }) => {
    commit("reduce");
  }
};
export default {
  namespaced: true,  // 使该模块带有命名空间，使它在命名上会按路径进行命名  如moduleA/state
  state,
  getters,
  mutations,
  actions
};

• 在使用了模块后，我们可以通过以下方式获取，这里只用了辅助函数展示

computed: {
  ...mapState({
    count: state => state.moduleA.count
  }),
  ...mapGetters({
    get: "moduleB/get"
  })
}

 

methods: {
  ...mapMutations(
    'moduleA', {addA:'add', reduceB:'reduce'}    // 重命名就用对象包裹
  ),
  ...mapActions(
    'moduleA', ['add', 'reduce']
  )
}

• 如果想引用根目录下的状态，需要传入第三个参数

const moduleA = {
  // ...
  getters: {
    addUnit (state, getters, rootState) {    //rootState为根下的状态
      return state.count + rootState.count
    }
  }
}