讲讲Vuex的使用方法。

vuex用于管理组件的全局状态(数据),方便组件之间的数据共享

创建store对象

const store = new Vuex.Store({...});

store中存储的状态是响应式的,当组件从store中读取状态时,如果store中的状态改变,那么相应的组件也会改变

不能直接改变store中的状态,只能通过提交mutations

完整的store

const store = new Vuex.Store({
  state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
   //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

 

核心概念:

state

存放的状态即数据,在没有state时,我们是在data中初始化的,在有state之后我们可以把data中共享的数据存放到其中,而一些组件私有的数据依然存放在自身的data中

组件访问state的

方式一:this.$store.state.全局数据名

方式二:mapState

需要在所需组件中导入import { mapState } from 'vuex';

通过导入的mapState函数将当前组件所需的全局数据,映射为当前组件的计算属性

computed: {
  ... mapState ([全局数据名])
  }

 

getter

用于对store中的数据加工处理后形成新的数据,类似vue的计算属性

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

获取getter里的数据

方式一:this.$store.getter数据名

方式二:通过mapGetter

import { mapGetters} from 'vuex';
computed: {
...mapGetters(['doneTodos'])
}

mutation(只能同步操作)

这里面是更改state的逻辑,唯一修改state里数据的方法是提价mutation(store.commit)

定义方式

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

在组件中提交

方式一:在组件的methods中提交

methods: {
  increment(){
    this.$store.commit('increment');
  }
}

方式二:使用mapMutaions;用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。

import { mapMutaions } from 'vuex';
export default {
  // ...
  methods: {
    ...mapMutaions([
    'increment' // 映射 this.increment() 为 this.$store.commit('increment')
  ]),
  ...mapMutaions([
      add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
    ])
    }
}
 

Action(异步操作)

因为mutations中只能是同步操作，但是在实际的项目中，会有异步操作，那么actions就是为了异步操作而设置的。这样，就变成了在action中去提交mutation，然后在组件的methods中去提交action。只是提交actions的时候使用的是dispatch函数，而mutations则是用commit函数

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state){
      state.count++;
    }
  },
  actions: {
    increment(context){
      context.commit('increment');
    }
  }
});
 
// action函数接受一个context参数，这个context具有与store实例相同的方法和属性。

在组件中提交action

方法1: 在组件的methods中，使用this.$store.dispatch(‘increment’)。

方法2: 使用mapActions，跟mapMutations是类似的。

import { mapActions } from 'vuex'
export default {
  // ...
  methods: {
    ...mapActions([
    'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')
  ]),
  ...mapActions({
  add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')
})
}
}
 
// 同样在组件中，可以这样来使用
<button @click="increment">+</button>

 

module

module是为了将store拆分后的一个个小模块，这么做的目的是因为当store很大的时候，分成模块的话，方便管理

const moduleA = {
    state: {...},
    getters: {...},
    mutations: {....},
  actions: {...}
}
 
const moduleB = {
    state: {...},
    getters: {...},
    mutations: {....},
  actions: {...}
}
 
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
});
 
store.state.a // 获取moduleA的状态
store.state.b // 获取moduleB的状态