2021-06-29 vuex的简单理解

vuex组件之间共享数据的方式

父向子传值：v-bind 属性绑定

子向父传值：v-on事件绑定

兄弟组件之间共享数据： EventBus

    $on 接收数据的那个组件

    $emit 发送数据的那个组件

以上方式，只使用于小范围内传递数据

vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现数组之间的数据的共享

vuex总结

修改state状态必须通过mutations

mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行

执行异步代码，要通过actions，然后将数据提交给mutations才可以完成

state的状态即共享数据可以在组件中引用

组件中可以调用action

1、vuex基础-state

state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中

//初始化Vuex对象

const store = new Vuex.store({

//设置公共数据状态  store映射到全局

state:{

//管理数据 

count:0

}

})

在数据中的取值方式

//在组件中取值 一共为三种

// 第一种原始形式-插值表达式  通过$store将里面的state里面

//的count取出来

state的数据:{{$store.state.count}}

//第二种 计算属性

//把state中数据，定义在组件内的计算属性中

computed:{

count(){

return this.$store.state.count;

}

}

state计算属性取值方式:{{count}}

//第三种 辅助函数 mapState

//mapState 能帮我们把store 中的数据映射到 组件的计算属性中

// 操作需要三步：

improt { mapState } from 'vuex' //第一步： 导入mapState

computed:{

//第二步利用延展运算符将到导出的状态映射到计算属性

...mapState(['count'])

}

state辅助函数取值方式:{{count}}

//第三步：取值

2、vuex基础-mutations

state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成数据快照

数据快照：一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步

mutations: {

    // 方法里参数 第一个参数是当前store的state属性

    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷

    addCount (state) {

      state.count += 1

    }

  },

原始形式-$store 通过commit（‘函数名’，参数） 去调用mutations里面的函数

3、vuex基础-actions 

是操作异步请求的 执行完毕异步请求通过 context.commit 去提交到mutations在通过 mutaitions修改state里面的数据

state是存放数据的，mutations是同步更新数据，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', 123)

}

4、vuex基础-getters 

类似于计算属性或者说是加工更或者说选出指定条件的值

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

state: {

    list: [1,2,3,4,5,6,7,8,9,10]

}

getters: {

    // getters函数的第一个参数是 state

    // 必须要有返回值

    filterList:  state =>  state.list.filter(item => item > 5)

  }