Vuex核心属性总结

Vuex是Vue的一个插件。

一、概念：

Vuex是对Vue应用中多个组件的共享状态进行集中式的管理（读/写）,Vue的应用是一个状态自管理的应用。

二、Vuex的安装：

NPM:

npm install vuex --save

Yarn:

yarn add vuex

三、学习：

每一个Vuex应用的核心就是store(仓库)。“store”基本上就是一个容器，包含着你的应用中大部分的状态（state）。

Vuex的结构图：

Vuex包含五个核心概念：分别是 State、 Mutations、Actions、Getters、Modules。

1.对结构图的解释：

  首先结构图包含两个部分，一个是vue Component，是Vue里面的组件。另一个包含Actions、Mutations、State、Getters的流程结构。
（1）在组件vue Component中使用this.$store.dispatch('xxx')分发action或者使用辅助函数mapActions将组件的methods映射为store.dispatch调用。

例如：（这里是放一小段案例的代码，方便大家明白上述是什么意思）

 methods:{
    
    
      deleteCompleteTodos(){
    
    
        this.$store.dispatch('deleteCompleteTodos',this.index)//删除todo
      },
      ...mapActions['deleteCompleteTodos']
    }

（2）Action:不能直接更新状态，任务是请求mutation（通过调用commit（）方法）。
  是否可以直接分发mutation呢？不能，因为mutation不能执行异步，而Action内部可以进行异步操作。
eg:

扫描二维码关注公众号，回复： 12321316 查看本文章

export default{
    
    
	deleteCompleteTodos({
    
    commit}){
    
    
    	commit(DELETE_COMPLETE_TODOS);
  	},
  //异步获取todos并更新状态
  	reqTodos({
    
    commit}){
    
    
    //模拟
	    setTimeout(()=>{
    
    
	      //读取数据
	      const todos = storageUtil.readTodos();
	      //提交一个mutation
	      commit(RECEIVE_TODOS,todos);
	
	},1000)
}

(3) Mutation：直接调用State里面的数据更新状态，包含多个由action触发去直接更新状态方法的对象。action中的cimmit()来触发，只能包含同步的代码，不能写异步代码。

//mutation-types.js文件
export const ADD_TODO = 'add_todo' //对应添加todo的更新操作

import {
    
    ADD_TODO} from './mutation-types'

export default{
    
    
//使用常量代替mutation的事件类型  
  [ADD_TODO] (state,{
    
    todo}){
    
    
    state.todos.unshift(todo); //添加至注数组开头位置，更新状态
  }，
}

(4) Getters：从state里面读取数据，包含所有基于state的getter计算属性的对象。读取方式：$store.getters.xxx

eg: 部分带码

    computed:{
    
    
      ...mapGetters(['totalCount','completeCount']),
      isAllCheck:{
    
    
        get(){
    
    
          return this.$store.getters.isAllCheck
        },
        set(value){
    
    //value boolean类型
          return this.$store.dispatch('selectAllTodos',value);
        }
      }
    }

首先在项目的src文件夹下创建一个store文件夹，创建一个index.js文件里面写上如下代码：

//Vuex通过store选项，提供了一种机制将状态从根组件"注入"到每一个子组件中
Vue.use(Vuex);
export default new Vuex.Store({
    
    
  state,
  mutations,
  actions,
  getters
})

（5）Modules:

• 包含多个module。
• 一个module是一个store的配置对象。
• 与一个组件对象（包含有共享数据）对应。