Vuex(一)

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

父向子传值：v-bind属性绑定
子向父传值：v-on事件绑定
兄弟组件之间共享数据：EventBus
$on 接收数据的那个组件
$emit 发送数据的那个组件

•  Vuex概述

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

图示：

使用Vuex的好处

集中管理共享数据，易于开发和后期维护
高效实现组件之间数据共享，提高开发效率
具有响应式特性，能够实时保持数据与页面的同步

适合存储到Vuex中的数据

组件之间共享的数据才有必要存储到vuex中；
对于组件私有的数据，依旧保存在组件自身的data中

• Vuex的基本使用

1.导入vuex依赖包
npm install vuex --save

2.导入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)

3.创建store对象
const store = new Vuex.Store({
	//state中存放的就是全局共享的数据
    state:{ count:0 }
})

4.将store对象挂载到vue实例中
new Vue({
	el:"#app",
    render: h => h(app),
    router,
    //将创建的共享数据对象，挂载到Vue实例中
    //所有的组件，就可以直接从store中获取全局的数据
    store
})

使用vue ui命令行打开了vue可视化创建项目工具

第一步：cmd输入vue ui
第二步：找到路径创建项目，此时桌面上应该有一个空文件夹用来创建项目
第三步：点击下方创建项目，包管理器选择npm
第四步：勾选babel、vuex、linter、config四个配置
第五步：创建，然后用Vscode打开

**解决Module Error (from ./node_modules/eslint-loader/index.js):的办法

https://blog.csdn.net/qq_36545813/article/details/107935645/

https://blog.csdn.net/Gabriel_wei/article/details/90269165

• Vuex的核心概念

1.State：存储共享数据

State:提供唯一的公共数据源，所有共享数据都要统一放到Store的State中存储
//创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
	state:{ count:0 }
})

组件访问State中数据的第一种方式：
this.$store.state.全局数据名称

组件访问State中数据的第二种方式
//1.从vuex中按需导入mapState函数
import { mapState } from 'vuex'
通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
//2.将全局数据，映射为当前组件的计算属性
computed: {
	...mapState(['count'])
}

8 errors and 0 warnings potentially fixable with the `--fix` option.的报错解决方法

注释掉.eslintrc.js文件中的’@vue/standard’

2.Mutation：更改Store的数据

Mutation用于变更Stroe中的数据
1.只能通过mutation变更Store数据，不可以直接操作Store中的数据
2.通过这种方式虽然操作起来稍微繁琐，但是可以集中监控所有数据的变化

//定义Mutation
const store = new Vuex.Store({
	state:{
    	count:0
    },
    mutations:{
    	add(state){
        //变更状态
        state.count++
        }
    }
})

//在调用方法页面
//触发mutation
methods:{
	handle1() {
    //触发mutation的第一种方式
    this.$store.commit('add')
    }
}

mutation可以在触发的时候传递参数：

//定义Mutation
const store = new Vuex.Store({
	state:{
    	count:0
    },
    mutations:{
    	addN(state,step){
        	//变更状态
            state.count += step
        }
    }
})

//调用方法页面
methods：{
	handle2(){
    	//在调用commit函数
        //触发mutations时携带参数
        this.$store.commit('addN',3)
    }
}

this.$store.commit()是触发mutations的第一种方式

接下来介绍触发mutations的第二种方式

//1.从vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex'

通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法：
//2.将指定的mutations函数，映射为当前组件的methods函数
methods:{
	...mapMutstions(['add','addN'])
}