vuex配置及使用
// 配置vuex
// 下载vuex包
// yarn add Vuex@3
// vuex引入
import Vuex from 'vuex'
// 2.vuex注册
Vue.use(Vuex)
// 3.vuex实例化
const store = new Vuex.Store({
// 数据
state: {
// 管理数据
count: 6
}
})
Vue.config.productionTip = false
new Vue({
// 4.vuex挂载
store: store,
render: h => h(App),
}).$mount('#app')
state 存放数据
1、概念
官方描述：state是放置所有公共状态的书写，如果你有一个公共状态数据，你只需要定义在state对象中。
大白话：state是vuex提供给我们声明全局变量的对象，如果我们想要声明一个全局变量，那么只需要把这个变量声明在state对象中即可
1、在实例化store对象的时候，通过state声明变量
<template>
<div>
<!-- 1.0版 -->
<div>state的数据:{{ $store.state.count }}</div>
<!-- 2.0版 -->
<div>state的数据:{{ Mycount }}</div>
<!-- 辅助函数 -->
<div>state的数据:{{ count }}</div>
</div>
</template>
<script>
// 辅助函数----
import { mapState } from "vuex";
console.log(mapState(["count"]));
export default {
// 1.0版
// created() {
// console.log("10", this.$store.state.count);
// },
// 2.0版
computed: {
Mycount() {
return this.$store.state.count;
},
// 辅助函数----
...mapState(["count"]),
},
};
mutations 同步更新数据
官方：state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成“数据快照”
大白话：mutations是vuex专门提供给开发来修改state数据的对象，mutations中只能写同步代码。
1.mutations基础用法
1、在state属性的同级地方添加mutations属性
代码
如何调用mutations中声明的函数呢？
语法：$store.commit('函数名')
mutations: {
// 自定义函数修改count的值
addCount(state) {
// state这是个内置的参数 指的是mutations同级的state
state.count += 1
}
}
<button @click="$store.commit('addCount')">1111</button>
2.优化mutations
把调用mutations函数的代码提取到函数中进行使用
代码
mutations: {
// 自定义函数修改count的值
addCount(state, payload) {
// state这是个内置的参数 指的是mutations同级的state
state.count += payload
}
}
<button @click="changeCount(6)">1111</button>
methods: {
changeCount(num) {
this.$store.commit("addCount", num);
},
},
3.辅助函数mutations
、辅助函数是为了优化mutations中函数的使用而存在的，这个辅助函数叫：mapMutations
2、使用语法：mapMutations([ '调用的函数名' ])
代码
<button @click="addCount(6)">1111</button>
import { mapMutations } from "vuex";
console.log(mapMutations(["addCount"]));
...mapMutations(["addCount"]),
actions 负责进行异步操作
state是存放数据的，mutations是同步更新数据的，actions则是负责异步操作
大白话：actions负责异步操作(通常都是ajax请求)，然后通过mutations来间接修改state中的数据。
1.actions基础方法
代码
actions: {
getAsyncCount(store, num) {
setTimeout(() => {
store.commit('addCount', num)
}, 3000)
}
}
<button @click="$store.dispatch('getAsyncCount', 10)">1111</button>
2.优化使用
3.辅助函数的使用
1、辅助函数是为了优化actions中函数的使用而存在的，这个辅助函数叫：mapActions
2、使用语法：mapActions([ '调用的函数名' ])
getters
1、概念
官方：除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters
大白话：除了state之外，我们还有能够通过getters来声明全局变量，而这些声明在getters中的变量的值是依赖于state中的数据得来。
主要作用(使用场景)：就是简化state中变化访问
2、基本使用
3、优化使用
4、辅助函数的使用
1、辅助函数是为了优化getters中函数的使用而存在的，这个辅助函数叫：mapGetters
2、使用语法：mapGetters([ '调用的函数名' ])
modules
1、概念
官方：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象state中，当应用(项目)变得非常复杂的时候，就有可能变得相当臃肿。vuex会变得越来越难以维护，由此，有了vuex的模块化。
大白话：因为所有的数据都是声明在state对象中的，当我们的项目变得非常复杂的时候，我们的state对象就会变得相当臃肿，vuex就变得难以维护，由此，有了vuex的模块化，也就是分模块来保存数据。
2、基本使用
1、vuex专门提供了一个modules属性给我们声明模块，这个属性只要写在和state、mutations、actions、getters同级的位置上即可。
const store = new Vuex.Store({
state:{},
mutations: {},
actions: {},
getters: {},
modules: {}
})
2、直接在modules中声明模块即可，每个模块都有state、mutations、actions、getters、modules
例如：我们在modules中声明两个模块，分别是user和setting模块
const store = new Vuex.Store({
modules: {
user: {
state: {
token
}
},
setting: {
state: {
name: 'vuex实例'
}
}
}
})
3、如何访问模块中的变量呢
语法：$store.state.模块名.属性名
<h1>
获取user模块中的token
{{$store.state.user.token}}
</h1>
3、优化使用
利用getters来优化使用模块中的变量
4、修改模块中的数据
当我们在模块中通过mutations来修改数据，最后调用模块中的mutations函数的时候发现和之前写在模块外面的mutations函数一模一样，
因此可以得出结论：默认情况下，模块内部的action、mutations、getters都注册在全局的。
5、如何才能使得模块中的mutations具有独立命名空间呢
我们可以通过namespaced属性设置为true， 从而给user模块加一道锁，此刻user模块中的所有内容都是局部的，都必须通过模块名才能访问到，该模块就叫具有独立的命名空间
比如：我们要访问mutations中的setToken函数，必须要通过user模块名来访问，
如何通过模块名访问呢？
答：有相应的语法进行访问
语法：$store.commit('模块名/函数名')
vuex的封装使用
