vuex的介绍
介绍：vuex是vue项目中实现大范围数据共享的技术方案
作用：能够方便、高效的实现组件之间的数据共享
好处：
-
数据存储一步到位，不需要层层传递
-
数据的流动非常清晰
-
存储在vuex中的数据都是响应式的
应用场景：
-
频繁且大范围的数据共享
-
需要共享的数据
vuex的基本使用
下包
npm install vuex --save
封装store模块
//1、导入 Vue和 vuex 依赖包
import Vue from 'vue'
import Vuex from 'vuex'
//2、把vuex 安装为 vue的插件
vue.use(Vuex)
//3、创建store的实例对象
const store = new Vuex.Store({'这个对象是vuex 的配置项'})
//4、向外共享 store 的实例对象
export default store
在main.js入口文件里将Store实例挂载到Vue实例上
//1、导入store模块
import store from '/store/index.js'
//2、挂载store实例对象
new Vue({
render:h=> h(APP),
store
}).$mount('#app')
以上是vuex的起步基本使用
vuex的成员介绍
state的介绍
概念：state本质上就是一个object对象
作用：用来存储全局共享数据
state的基本使用
//定义state
const store = new Vuex.Store({
//全局存储共享的数据
state:{
属性名： 属性值
}
})
组件中使用state中的数据
1、在组件代码块中直接访问：
this.$store.state.属性名
2、在组件代码块中使用vuex提供的mapState辅助函数访问：
//按需导入mapState辅助函数
import {mapState} from 'vuex'
export default{
computed:{
//把需要的全局数据，映射为当前组件的计算属性
...mapState(['全局数据名称'])
}
}
this.全局数据名称//代码块中的访问方式
mapState辅助函数将Store中state对象里指定的数据，映射为当前组件的计算属性
Mutation 的介绍
概念：本质上是一个JavaScript函数，专门用来修改Store 中的数据
好处：能够确保修改来源的唯一性，方便调试和后期维护
注意：！！！！只要想要修改State中的数据，只能通过Mutation方法！！！！
Mutation的基本使用
//定义mutations：
const store = new Vuex.Store({
//所有mutation里的函数，第一个参数都是state,第二个参数是载荷（调用方法时传递过来的参数）
mutations:{
add(state,payload){
state.count+=payload
}
...其他方法
}
})
组件中使用Mutation中的函数
1、在组件代码块中直接调用函数：
thie.$store.commit('函数名'，参数 ) //调用Mutation中指定名称的方法，并携带参数，修改数据
2、在组件代码块中使用vuex提供的mapMutations辅助函数来调用：
//按需导入mapMutations辅助函数
import {mapMutations} from 'vuex'
export default{
methods:{
...mapMutations(['函数名']), //从vuex中把这个函数映射为当前组件的 methods方法
sub(){
this.函数名(传值)//在事件里调用展开的函数
}
}
}
mapMutations辅助函数将Store中指定的方法，映射为当前组件的methods
注意：为了保证Store中状态的每一次变化都是可追踪的，规定Mutation中的方法必须是同步函数
Action 的介绍
概念：本质上是JavaScript函数，专门用来处理vuex中的异步操作
注意：Action不能直接修改数据，但是可以得到异步操作的数据结果，得到数据后再交给Mutation处理数据
总结：vuex中的异步操作需要用到Action
Action 的基本使用
//定义Actions：
const store = new Vuex.Store({
//context 表示当前new 出来的store 实例对象
actions:{
addAsync(context,payload){
//执行异步操作：发请求、定时器...
//commit调用mutation里的函数,将参数传递过去
context.commit('函数名'，payload)
}
}
})
组件中使用 Action 中的函数
1、在组件代码块中直接调用函数：
this.$store.dispatch('函数名'，参数) //即可触发指定名称的action里的方法
2、在组件代码块中使用vuex提供的mapAction辅助函数来调用：
//按需导入mapAction辅助函数
import {mapAction} from 'vuex'
export default{
methods:{
//从vuex中把指定的函数映射为当前组件的methods方法
...mapAction(['函数名']),
sub(){
this.函数名(传值)//在事件里调用展开的函数
}
}
}
mapAction辅助函数将Store中指定的方法，映射为当前组件的methods
Getter 的介绍
概念：本质上是JavaScript函数，组件内的计算属性有局限性，Getter可以变成全局计算属性
作用：给vuex做计算属性，当State数据源发生变化，Getter返回值会自动更新
Getter 的基本使用
//定义getters
const store = new Vuex.Store({
getters:{
//计算属性的第一个参数永远都是state
isAll(state){
//Getter 必须return 一个计算结果
return 值
}
}
})
组件中使用 Getter 中的函数
1、在组件代码块中直接调用函数：
this.$store.getters.计算属性
2、在组件代码块中使用vuex提供的mapGtters辅助函数来调用：
//按需导入mapGtters辅助函数
import {mapGtters} from 'vuex'
export default{
computed:{
//把需要的Getter，映射为当前组件的计算属性
...mapGtters(['全局计算属性名'])
}
}
mapGtters辅助函数将Store中getter映射为当前组件的计算属性
Module 的介绍
概念：按照模块化的开发思想，把不同的数据和方法，按照彼此关联关系进行封装
Module 的基本使用
//1、导入不同的module模块对象
improt moduleCount from './count,js'
improt moduleTodo from './todo,js'
const store = new Vuex.Store({
modules:{
//2、注册模块格式如下：
//模块的注册名：导入的模块对象
count:moduleCount,
todo:moduleTodo
}
})
开启命名空间
export deafult {
//为当前模块开启命名空间，可以解决不同模块之间的命名冲突，如果没有开启名命空间，那么所有模块的成员都约等于全局的
namespaced:true,
state:()=>({}),//在模块对象里定义state的时候由对象变成了函数，并且要返回一个对象
mutations:{},
actions:{},
getters:{}
}
