Vue是什么?
-
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
-
vuex是采用集中式管理组件依赖的共享数据的一个工具,可以解决不同组件数据共享问题。
大家都知道兄弟组件之间的传值是用到事件EventBus来进行的,当然也可以通过父组件作为桥梁进行传值,那么遇到祖孙组件时传值就会比较麻烦,所以eventbus只是小型项目考虑的,当项目大起来的时候,就考虑使用vuex(因为是官方的亲儿子- - )
这个状态自管理应用包含以下几个部分:
state,驱动应用的数据源;
view,以声明方式将 state 映射到视图;
actions,响应在 view 上的用户输入导致的状态变化。
以下是一个表示"单向数据流"理念的简单示意图
初始化项目:
npm i vuex --save
-- 安装到运行时依赖 开发时依赖 就是开开发的时候,需要的依赖,运行时依赖,项目上线运行时依然需要的
vuex基础-state:
state是放置所有公共状态的属性,如果你有一个公共状态数据 , 你只需要定义在 state对象
中定义state
store/index.vue
import Vue from 'vue'
// 1.引入库
import Vuex from 'vuex'
// 2.注册(其实是执行了Vuex内的install方法
//vuex: 全局状态共享 state:状态
// 全局: 所有组件都能共享使用 state 中的值
Vue.use(Vuex)
export default new Vuex.Store({
// 3.书写在 state 中的变量, 就可以全局共享, 在所有组件中都可以使用
state: {
//管理数据
count:0,
name:'zs'
},
mutations: {
},
actions: {
},
modules: {
}
})
这个.vue文件放view文件夹或者components文件夹那都可以 ,自己创一个文件
<template>
<div>
<!-- 怎么在组件中获取count 和 name? -->
<!-- 这是原始的插值语法 -->
<div>{
{$store.state.count}}</div>
<div>{
{$store.state.name}}</div>
<!-- 这是语法糖写法 这种写法比较多人喜欢 它有三个步骤 -->
<!-- 3.使用接收 -->
<div>{
{count}}</div>
<div>{
{name}}</div>
</div>
</template>
<script>
// 1.引入mapState
import { mapState } from 'vuex'
export default {
computed:{
// 语法糖写法 mapState是辅助函数 帮助我们把store中的数据映射到 组件的计算属性中
// 2.采用数组形式引入state属性,并用扩展运算符将导出的状态映射给计算属性
...mapState(["count","name"])
}
}
</script>
<style lang="scss" scoped>
</style>