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:

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的配置对象。
• 与一个组件对象（包含有共享数据）对应。