vuex

作用：组件的集中式管理工具
配置方式：
1.安装vuex包 npm i vuex -S
2.在src下新建文件夹store,并在其中建文件index.js
3.在index.js中写入如下代码：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)  //注册(类似于中间件挂载注册)
export default new Vuex.Store({
state:{
class:'配置数据',
userInfo: {name: 'tom',skills: ['抖音', 'B站', '美团'],address: '地址',logo: 'https://vuejs.org/images/logo.svg'//  https://www.runoob.com/wp-content/uploads/2016/02/react.png}
},
mutations:{ //定义函数，与外部做链接，让state中变量可以与外界交互，被外界修改
setLogo:function(state,newlogo){
state.userInfo.logo=newlogo
}
}
})

4.在main.js中导入，代码如下：

import store from './store'
new Vue({
store  //在vue实例中注册
})

5.在App.vue中数据使用方式如下：
{{ $ store.state.class}} //此处由于是写在模板中，所以用$ 引用，如果不在模板中，则用this.引用
引用示例：

methods:{
btnHandle(){
this.$store.commit( //调用commit方法来触发vuex中配置的mulations
'setlogo',  // 通过与mulations中对应的参数名来调用处理方法
'https://www.runoob.com/wp-content/uploads/2016/02/react.png' //向被调用的处理方法传值
)
}
}

state属性
作用：用于存储公共数据，方便没有直接关系的组件可以共用某些都需要使用到的数据
用法：
state:{
属性名:属性值
}
调用方法：
{{$ store.state.属性名}} //此处由于是写在模板中，所以用$ 直接引用，如果不在模板中，则用this.$引用

mutations属性
作用：用于定义函数，让外部组件可以对state的数据做交互(其实不通过这个属性里面写方法的方式也能通过如：this.$ score.state.userInfo.logo来修改，但是不符合严格模式要求，会报错)
用法：
参数名:function (state,{形参1,形参2}){//state为必填项，表示上面的state对象，第二个参数为选填，单个数据直接当作普通形参写，多个数据则建议用es6语法{}解构，但是结构后要求此处形参名要和methods中方法里对应的属性名同名
}
调用方法：
methods:{
changfn(){
this.$score.commit( // 调用commit方法来触发vuex中配置的mutations
‘对应mutations中函数的参数名’,{//此处传入多个形参，需要用对象写在一起，因为默认要求只能导入一个数据，所以用对象包裹
形参1:’’,
形参2:’’
}
)
}
}

getters属性
作用：类似于computed计算属性，对state中的数据做计算
用法：
参数名:function(state){return 计算语句} //意思就是说通过当前数据计算，并返回一个由计算得来的数据
调用方法:{{$ score.getters.参数名}} 或者{{$score.getters[参数名]}}

actions 属性
作用：主要用于发送请求获取数据，发送请求的操作需要写在这里
用法：
actions:{
async 函数名(context){ //context是整个vuex实例,目的是为了获取到mutations中的方法
const res = await axios({
url:’’,
method:’’,
})
context.commit(‘mutations中某个对应的参数名’,给对应参数的方法传入实参)
}
}
调用方法：
例如，需要在页面开启时获取到数据，如下写：
created(){
this.$store.dispatch(‘对应于actions中相应请求的参数名’)
}
如下为一个实例：
actions: {
async getbooks({commit}) {//将context解构，直接获取里面的commit方法
const res =await axios({
url: ‘https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books’
})
commit(
‘addbook’,
res.data.data
)
},
},

modules 模块属性
作用：拆分功能，将一个复杂的模块分解为多个小的简单模块
方法：
1.在store文件夹下新建一个modules文件夹
2.将某些同属于一个流程线的数据拆分出来，放在一个js文件中，文件将这些数据导出之后在index.js的modules中挂载即可
3.每个模块的js文件中大致有如下内容：
export default {
namespaced:true //写入该代码后，在调用其中数据时，需要额外加入一个在modules中挂载名字的前缀，作为引用的路径
state:{},
mutations:{},
getter:{},
actions:{},
modules:{}
}
写法示例：
先导入相应的模块
import user from “./modules/user”;
import books from “./modules/books”;
1.挂载示例：
modules: {
books,
user
}
2.state数据引用示例：
< img :src="$ store.state.user.userInfo.logo" alt=""> //此处的user则是额外添加的前缀
3.mutations函数引用示例：
change(){
this.$ store.commit(
‘user/changelogo’, //此处的user/则是额外添加的前缀
{
newlogo:‘https://www.runoob.com/wp-content/uploads/2016/02/react.png’,
newname:‘jery’
})
}
},
4.getter引用示例：
< li>总价：{{$ store.getters[‘books/sum’]}}< /li> //这个比较特殊，需要用数组包裹，然后写额外的路径books/
5.actions引用示例
created(){
this.$store.dispatch(‘books/getbooks’) //此处的books/则是额外添加的前缀
}