Vuex教程

Posted 2021-01-27

一、概览
1、Vuex是什么

• 专为Vue.js应用程序开发的状态管理模式（状态即数据，即数据管理）
• 采用集中式存储管理应用的所有组件的状态
• 以相应的规则保证状态以一种可预测的方式发生变化
  2、状态
• 组件内部状态：仅在一个组件内使用的状态( 即data字段里的数据，不能共享，只在本组件使用 )
• 应用级别状态：多个组件共用的状态
  3、什么情况下使用Vuex
• 多个视图依赖同一状态
• 来自不同视图的行为需要变更同一状态

二、使用Vuex

1、安装Vuex模块
npm install vuex --save-dev
2、作为插件使用
Vuex.use(Vuex)
3、定义一个容器
new Vuex.Store()
4、注入根实例
new vue({
    store
})

具体步骤：

1、在src目录下新建store文件夹，里面创建index.js文件
在index.js文件：
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vuex.use(Vuex)
let store = new Vuex.Store({
    state:{  //对象，应用所需要的状态数据都放在这里面
        count:100
    },
    mutations:{  //对象，显示的提交mutations
        addIncrement(state){
            //do something
        }
    }
})
export default store

其他组件：
methods:{
    addHandle(){  //改变状态，提交mutations
        this.$store.commit(‘addIncrement‘);
    }
}

2、在main.js下面
import store from ‘./store‘
new vue({
    router,
    store
})

三、Vuex核心概念
1、store：类似容器，包含应用的大部分状态

• 一个页面只能有一个容器
• 状态存储是响应式的
• 不能直接改变store中的状态，唯一途径显示地提交mutations
  2、State：包含所有应用级别状态的对象
  3、Getters：在组件内部获取store中状态的函数
  4、Mutations：唯一修改状态的事件回调函数
  5、Actions：包含异步操作、提交mutations改变状态
  6、Modules：将store分割成不同的模块