VUEX的基础 vue.js

一、vuex是基本概念

概念：是一个专为 Vue.js 应用程序开发的状态管理模式；
作用：vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题；
注意：

修改state状态必须通过mutations
mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
state的状态即共享数据可以在组件中引用
组件中可以调用action

二、vuex基础-初始化功能

创建一个新的脚手架项目：vue create demo
开始初化，安装vuex，这里我们暂时使用3.6.2版本的：yarn add vuex@3.6.2
在main.js中引入：import Vuex from 'vuex'
在main.js中调用：Vue.use(vuex)
在main.js中设置配置项：const store = new Vuex.Store({...配置项})
在main.js中根实例配置 store 选项指向 store 实例对象：new Vue({....,store,...})

三、vuex的核心概念——state

// state是放置所有公共状态的属性，如果你有一个公共状态数据，你只需要定义在 state对象中// 定义state //初始化vuex对象 const store = new Vuex.Store({ state: { // 管理数据 count: 0 } })//在组件中获取count有三种方式： // 第一种:原始形式插值表达式 state的数据：{{ $store.state.count }}//第二种：计算属性将state属性定义在计算属性中 computed: { count () { return this.$store.state.count } } state的数据：{{ count }}// 第三种：辅助函数 mapState import { mapState } from 'vuex' computed: { ...mapState(['count']) } state的数据：{{ count }}

四、vuex的核心概念——mutations

// state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成数据快照 // 定义mutations const store= new Vuex.Store({ state: { count: 0 }, // 定义mutations mutations: { // 方法里参数第一个参数是当前store的state属性 // payload 载荷运输参数调用mutaiions的时候可以传递参数传递载荷 addCount (state) { state.count += 1 } }, })// 调用的第一种方法：原始形式 $store addCount (state, payload) { state.count += payload } this.$store.commit('addCount', 10) // 调用的第一种方法:辅助函数 mapMutations import{ mapMutations } from 'vuex' methods: { ...mapMutations(['addCount']) }

五、vuex的核心概念——actions

// state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作 // 定义actions actions: { //获取异步的数据 context表示当前的store的实例可以通过 context.state 获取状态也可以通过context.commit 来提交mutations，也可以 context.diapatch调用其他的action getAsyncCount (context) { setTimeout(function(){ // 一秒钟之后要给一个数去修改state context.commit('addCount', 123) }, 1000) } }// 第一种调用的方法：原始调用 $store addAsyncCount () { this.$store.dispatch('getAsyncCount') }// 第二种调用的方法：传参调用 addAsyncCount () { this.$store.dispatch('getAsyncCount', 123) }// 第三种调用的方法：辅助函数mapActions import { mapActions } from 'vuex' methods: { ...mapActions(['getAsyncCount']) }

【VUEX的基础】六、vuex的核心概念——getters

// 除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters // 定义getters getters: { // getters函数的第一个参数是 state // 必须要有返回值 filterList:state =>state.list.filter(item => item > 5) }// 使用getters的第一种方法：原始方式 $store {{ $store.getters.filterList }}// 使用getters的第二种方法：辅助函数mapGetters import { mapGetters} from 'vuex' computed: { ...mapGetters(['filterList']) } {{ filterList }}

七、vuex的核心概念——Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿，所以就需要用到模块化，也就是Module；

// 模块化的简单应用// 定义两个模块user 和setting// user中管理用户的状态token // setting中管理应用的名称 name const store= new Vuex.Store({ modules: { user: { state: { token: '12345' } }, setting: { state: { name: 'Vuex实例' } } })// 定义child-b组件，分别显示用户的token和应用名称name // 请注意：此时要获取子模块的状态需要通过 $store.**`state`**.**`模块名称`**.**`属性名`** 来获取 getters: { token: state => state.user.token, name: state => state.setting.name } // 请注意：这个getters是根级别的getters哦// 通过mapGetters引用 computed: { ...mapGetters(['token', 'name']) }