自己做服务器的网站吗怎么做网络营销推广
目录
一、vuex概述
1.定义
优势：
2.构建环境步骤
3.state状态
4.使用数据
4.1通过store直接访问
4.2通过辅助函数
5.mutations修改数据（同步操作）
5.1定义
5.2步骤
5.2.1定义mutations对象，对象中存放修改state数据的方法
5.2.2mutations的传参语法
5.2.3利用辅助函数mapMutations
6.actions异步处理操作
6.1提供actions方法
6.2辅助函数mapActions
7.getters基本语法（没有修改只有获取）
7.1直接通过store访问getters
7.2通过辅助函数mapGetters访问
8.module模块
8.1所以以我们在开发项目过程中， 需要对模块进行拆分--->在store下面新建modules文件夹
8.1.1配置模块文件
8.1.2导入store中并且配置到modules中使用
8.2分模块之后，如何使用模块中的state、mutations、actions以及getters方法
8.2.1直接通过模块名访问
8.2.2通过辅助函数映射---默认跟级别的映射
8.2.3通过辅助函数进行子模块的映射
8.2.4关于actions方法中的context
8.3模块中更推荐的state配置写法
一、vuex概述
1.定义
vuex是一个状态管理工具，可以帮助我们管理vue通用的数据（多组件共享的数据）
优势：
- 共同维护一份数据，数据集中化管理
- 响应式变化
- 操作简洁
2.构建环境步骤
- 安装vuex----->yarn add vuex@3---->此时用的是vue2所以要使用vuex3的版本
- 新建store目录文件夹存放单独的js文件存放vuex
- Vue.use(Vuex)
- 创建仓库---->cosnt store = new Vuex.Store()
- 在main.js中导入并且挂载在实例上
通过this.$store访问到仓库---->所有组件都能访问到的通用的对象
3.state状态
1.定义
类似于与vue组件中的data，都是指的数据
2.提供数据
state提供的唯一的公共数据元，所有共享的数据都要统一放到store中的state中存储，在state对象中可以添加我们要共享的数据
const store = new Vuex.Store({state: {//数据}
})注意：data中的数据是自己的数据，state中的数据是所有组件共享的数据
4.使用数据
通过store直接访问或者通过辅助函数（辅助函数访问更简单）
4.1通过store直接访问
//获取store
import store from '路径'
//利用this.store访问到仓库//在模板中使用
{{ $store.state.xxxx }}//组件逻辑中
this.$store.state.xxxx//js模块中书写方法
store.state.xxxx4.2通过辅助函数
定义：把state中数据定义在组件内的计算属性中，{{计算属性}}，mapState是辅助函数，帮助我们把store中的数据映射到组件的计算属性中
//导入辅助函数
import { mapState } from "vuex"//使用辅助函数，用数组方式引入state
mapState(['变量'])//展开运算符映射到计算属性中
computed：{ ...mapState(['变量']) }5.mutations修改数据（同步操作）
5.1定义
明确vuex同样的遵循单向数据流，组件中不能修改仓库中的数据
通过strict:true，可以开启严格模式（在其他组件中直接修改仓库中的数据会报错，在最终上线的时候不用开启严格模式。因为严格模式是为了更好的提醒程序员出错点以及原因便于修改）
若是想要修改state中的数据那么只能通过mutations
5.2步骤
5.2.1定义mutations对象，对象中存放修改state数据的方法
const store = new Vuex.Store({state:{....},mutations:{mutations函数名(state){ //state.数据修改逻辑}}
})//组件中调用
this.$store.commit('mutations函数名')5.2.2mutations的传参语法
//传递一个参数的情况
const store = new Vuex.Store({state:{....},mutations:{mutations函数名(state，参数){ //state.数据修改逻辑}}
})//组件中调用
this.$store.commit('mutations函数名',参数)//传递多个参数则采用对象模式
const store = new Vuex.Store({state:{....},mutations:{mutations函数名(state，obj){ //state.数据修改逻辑}}
})//组件中调用
this.$store.commit('mutations函数名',{参数1:值1,参数2:值2....})5.2.3利用辅助函数mapMutations
mapMutations本质上就是把mutations中的方法提取出来，映射到组件的methods中
//在mutations中提供方法
const store = new Vuex.Store({state:{....},mutations:{mutations函数名(state,参数){ //state.数据修改逻辑}}
})//映射到组件的methods中
import { mapMutations } from 'vuex'
methods:{ ...mapMutations(['mutations函数名'])
}//组件中调用
this.函数名(参数) //可以直接利用click点击直接调用并传参6.actions异步处理操作
6.1提供actions方法
//提供actions方法
const store = new Vuex.Store({state:{....},mutations:{....},actions:{actions函数名(context,参数){//异步处理逻辑(如发请求)}}
})//页面中调用
this.$store.dispath('actions函数名'，参数)actions处理异步操作但是并不会直接操作state，如果想要修改state，需要调用mutations方法
----->context.commit('mutations函数名',额外参数)
6.2辅助函数mapActions
同mutations一样，直接映射到组件中的methods中，可以直接调用
//在mutations中提供方法
const store = new Vuex.Store({state:{....},mutations:{....},actions:{actions函数名(context,参数){//异步处理逻辑(如发请求)}}
})//映射到组件的methods中
import { mapActions } from 'vuex'
methods:{ ...mapActions(['actions函数名'])
}//组件中调用
this.函数名(参数)7.getters基本语法（没有修改只有获取）
有时候需要从state中派生出一种状态，这些状态时依赖于state的，此时就会用到getters
7.1直接通过store访问getters
//提供actions方法
const store = new Vuex.Store({state:{....},mutations:{....},actions:{....},getters:{getters函数名(state){//处理逻辑return getters计算结果}}
})//页面模板中通过store访问getters
{{ $store.getters.getters函数名 }}7.2通过辅助函数mapGetters访问
//提供actions方法
const store = new Vuex.Store({state:{....},mutations:{....},actions:{....},getters:{getters函数名(state){//处理逻辑return getters计算结果}}
})//映射到组件的methods中
import { mapGetters } from 'vuex'
computed:{ ...mapGetters(['getters函数名'])
}//组件中调用
{{ getters函数名 }}
四个辅助函数记忆：
- mapState 和 mapGetters 是在映射属性
- mapMutations 和 mapActions 是在映射方法
8.module模块
由于vuex是使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，state对象就可能变得臃肿且难以维护。
8.1所以以我们在开发项目过程中， 需要对模块进行拆分--->在store下面新建modules文件夹
8.1.1配置模块文件
//在模块文件中//配置state数据对象
cosnt state = {数据：{key:value,key1:value,...}
}//配置mutations方法
const mutations = {},//actions方法
const actions = {},//配置getters方法
const getters = {}//导出配置对象
export default {state,mutations,actions,getters
}8.1.2导入store中并且配置到modules中使用
//导入store中import 文件名 from '路径'//配置modules对象const store = new Vue.Store({modules:{文件名,...}
})8.2分模块之后，如何使用模块中的state、mutations、actions以及getters方法
分模块之后，各模块的辅助函数的参数state时指代子模块中的state
8.2.1直接通过模块名访问
//直接通过模块名访问state$store.state.模块名.xxx//直接通过模块名访问getters$store.getters['模块名/xxx']//直接通过模块名访问mutations$store.commit('模块名/xxx',额外参数)//直接通过模块名访问actions$store.dispatch('模块名/xxx',额外参数)8.2.2通过辅助函数映射---默认跟级别的映射
//直接通过mapState访问state----默认根级别的映射mapState(['xxx'])//直接通过mapGetters访问getters----默认根级别的映射mapGetters(['xxx'])//直接通过mapMutations访问mutations----默认根级别的映射mapMutations(['xxx'])//直接通过mapActions访问actions----默认根级别的映射mapActions(['xxx'])8.2.3通过辅助函数进行子模块的映射
//需要在子模块中开启命名空间namespaced:true//直接通过mapState访问state----子模块的映射mapState('模块名',['xxx'])//直接通过mapGetters访问getters----子模块的映射mapGetters('模块名',['xxx'])//直接通过mapMutations访问mutations----子模块的映射mapMutations('模块名',['xxx'])//直接通过mapActions访问actions----子模块的映射mapActions('模块名',['xxx'])8.2.4关于actions方法中的context
context是上下文的意思，默认提交的就是自己模块的actions和mutations方法，基于当前模块环境指向不同的空间
8.3模块中更推荐的state配置写法
export default {namespaced:true,state () { //利用函数的形式存储数据使其更加具有独立性return {//数据}}
}