Vuex学习笔记及Vuex中module的简单使用

Image [2].png

vuex其实就是一个大的全局管理容器/仓库，你可以在你项目的任何地方用到它，并且store的状态是响应式的，也就是说在某一个组件里修改store，则可以得到全局的响应变更。

不能直接更改store中的状态，改变store中的状态唯一途径就是显示的提交（commit）

例如：

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }})
  
  // 不要直接改变store.state.count
store.commit('increment') // 提交
console.log(store.state.count) //  1

由于store中的状态是响应式的，在组件中调用store只需在计算属性中返回即可，触发变化也仅仅是在组件methods中提交mutation。

在组件中获取store中的状态

① 通过组件中计算属性返回

Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `})

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }}

② 使用getter

getter其实就相当于是store的计算属性，来实时监听state值的变化(最新状态)

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }})

通过属性访问getter

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

getter也可以接受其他getter作为第二个参数

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }}
  
store.getters.doneTodosCount // -> 1

通过方法访问

让getter返回一个函数，以函数的参数给getter传参

getters: {
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
    // 也可以采用下面这种写法
    getTodoById(state) {
        return (id) => {
         return state.todos.find(todo => todo.id === id)
    }
  }}
  
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

mutation

mutation 必须是同步操作

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }})

上例中的increment是事件类型type，后面是回调函数handler，要调用一个mutation的handler，必须以相应的type调用store.commit

store.commit('increment');

当然，也可以向store.commit传入额外的参数

mutations: {
  increment (state, payload) {
    state.count += payload.count
  }
}

// 可以这样传参
store.commit('increment', {
    count: 10
})

// 也可以这样传参
store.commit({
    type: 'increment',
    count: 10
})

其实更建议使用常量命名 Mutation 事件类型

mutations: {
    SOME_MUTATION: (state, payload) =>  {
         state.count += payload.count
  }
}

action

action提交的是mutation，不是直接改变状态
异步操作

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
    // 也可以这样
    increment ({ commit }) {
      commit('increment')
    }
  }
 })

context是一个与 store 实例具有相同方法和属性的对象，因此可以context.commit 或者 context.state、context.getter来获取

在action中执行异步操作

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
 }

action是通过store.dispatch触发

store.dispatch('incrementAsync')

// 也可以传参

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
  })
 
// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
  )

mapState、mapGetter、mapMutation、mapAction辅助函数

这些辅助函数，其实都是帮我们在组件中映射相应的状态，减少不必要的代码

例如：

//  store文件中
const store = new Vuex.Store({
    state: {
        count: 0
    },
     mutations: {
        increment (state) {
            state.count++
    }
  },
      actions: {
        increment (context) {
            context.commit('increment')
        }
    },
    getters: {
        getCount(state) {
            return state.count
        }
    }
})

//  组件中
import { mapState，mapGetter，mapMutation，mapAction} from 'vuex'

export default {

    computed: {
        ...mapState({
            count: state => state.count
        }),
        ...mapState([
            'count', // 将this.count映射为this.$store.state.count
        ]),
        
        ...mapGetters([
             'getCount', // 将this.getCount映射为this.$store.getters.getCount
        ]),
         ...mapGetters({
             getCount: getCount, 
        })
    },
    methods: {
        ...mapAction([
            'increment', // 将 `this.increment()` 映射为`this.$store.dispatch('increment')`
        ]),
        
        ...mapActions({
              add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
            }),
            
         
        ...mapMutations({
              add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
            }),
        ...mapMutations([
            'increment', // 将 `this.increment()` 映射为`this.$store.commit('increment')`
        ]),
     }
}

vuex中的module模块化

当一个项目过于复杂需要共享的状态过多时，store对象就会变得非常臃肿且不好管理，这时我们就可以使用vuex提供的将store分割成一个个module

如何使用？
首先在store文件夹下新建module文件夹，里面就是管理状态的js文件，既然要把不同状态分开，那就建立不同的文件

Image.png

此时store文件夹下的index文件就要改成如下所示：


import Vue from 'vue';
import Vuex from 'vuex';
import a1 from './modules/a1';
import a2 from './modules/a2';
Vue.use(Vuex);

export default new Vuex.Store({
    modules:{
         a1,
         a2
    }
});

默认情况下，模块内部的action等是注册在全局命名空间的，如果你希望你的文件具有更高的封装性和复用性，可以通过添加namespaced:true使其成为带命名空间的模块。

而我们如何在组件中使用带有命名空间的模块？
举个栗子：

// a1.module.js
const a1 = {
  namespaced: true,
  state: {
    flag: false
  },
  mutations: {
    CHANGE_FLAG: (state) => {
      state.flag = true;
    }
  },
  actions: {
    changeFlag({commit}) {
      commit('CHANGE_FLAG');
    }
  } 
}
export default a1;

// 组件中
<tempalte>
    <div>
        <div v-if="flag"> 显示 </div>
        <div v-else> 隐藏 </div>
    </div>
</tempalte>
import {mapState , mapActions} from 'vuex';
export default {
    name: 'A1',
    data() {
        return {}
    },
    computed: {
        // a1 表示指的是modules文件夹下的a1.module.js文件
        ...mapState('a1', { 
            flag: state => state.flag
        }),

        // 也可以这样写
        ...mapState({
            flag: state => state.a1.flag
        }),

        // 不使用mapState
        flag() {
            return this.$store.state.a1.flag
        }
    },
    methods: {
        ...mapActions('a1', ['changeFlag'])  
        // 此时将this.changeFlag映射为 this.$store.dispatch('a1/changeFlag')
    }
}

至此，简单的使用vuex你学会了吗？