1.vuex简介
Vuex是专门为Vue框架提供的。用来管理状态的模块。集中式管理状态数据。它管理的数据可以追踪变化。它是在多个组件之间共享数据的方案。
在store/index.js 定义仓库对象，需要对仓库对象进行配置
state:需要共享的数据
mutations:定义修改state的同步的方法
getters:定义对状态的过滤的操作，类似于组件的计算结果
actions:定义异步获取数据并且赋值给state
modules:状态模块化
2.vuex的定义
state：状态，需要共享的数据 不能直接修改，要么通过actions异步进行，要么通过mutations进行同步修改.
export default new Vuex.Store({
? state: {
? ? a:10,
? ? txt:"hello",
? ? arr:["yesterday once more","my heart will go on"],
? ? name:{
? ? ? firstName:"张",
? ? ? lastName:"三"
? ? },
? ? homeData:[]
? },
})
mutations:同步修改state的字段,里面都是一些函数，修改state字段里面的状态。
? mutations: {
? ? // 参数1state对象，参数2调用的时候传递的实参
? ? setNum(state,v){
? ? ? state.a = v
? ? },
? ? // 修改txt状态的函数
? ? setTxt(state,v){
? ? ? state.txt = v
? ? },
? ? setHomeData(state,v){
? ? ? state.homeData ?= v
? ? }
? },
getters：类似于组件的计算结果,有返回值，过滤
? getters:{
? ? fullName(state){
? ? ? return state.name.firstName + state.name.lastName
? ? }
? },
actions： 异步获取数据并且通过同步修改的方法进行修改
actions: {
? ? // 参数1：仓库对象，参数2：可以传递一些参数
? ? queryData(store,v){
? ? ? return new Promise((resolve,reject)=>{
? ? ? ? axios.get("/api/test",{params:{page:1,pageSize:3}}).
? ? ? ? then(res=>{
? ? ? ? ? // 提交mutations方法,调用mutations中同步的方法
? ? ? ? ? store.commit("setHomeData",res.data.data)
? ? ? ? ? resolve()
? ? ? ? }).catch(err=>{
? ? ? ? ? reject(err)
? ? ? ? })
? ? ? })
? ? }
? },
3.vuex的使用
state: ?
1.$store.state.字段
? <p>{{ $store.state.a }}</p>//store全局唯一的对象
2.先通过maoState进行映射到computed里面然后去使用
// 导入vuex的映射函数
import {mapState} from "vuex"
export default {
? computed:{
// 映射状态的时候可以在组件的计算结果中进行映射,通过扩展运算符把仓库的一个状态以数组的形式写在mapstate的参数里面
? ? ...mapState(["a","txt","arr"])
? }
}
mutations:
1.this.$store.commit("setNum",传递的数据)
export default {
? methods: {
? ? f1() {
? ? ? // 第三种方法 通过commit提交方法进行提交修改
? ? ? this.$store.commit("setNum", 1000000);
? ? ? this.$store.commit("setTxt", "撒谎比");
? ? },
? },
2.先通过mapMutations进行映射到methods里面然后再去使用
import {mapMutations} from "vuex";
export default {
? methods: {
// 把mutations里面的修改方法映射到methods,相当于在本组件的methods中添加一些函数，可以在本组件使用
? ? ...mapMutations(["setNum", "setTxt"]),
? ? f1() {
? ? ? // 第一种修改状态的方法
? ? ? // this.setNum(100)
? ? ? // this.setTxt("你好")
? ? ? // 第二种修改 通过仓库对象访问状态直接进行修改，不建议去使用
? ? ? // this.$store.state.a = 1000000
? ? },
? },
actions
1.this.$store.dispatch("action的名字",传递的数据)
export default {
? created(){
? ? // 仓库里面的异步 action调用
? ? this.$store.dispatch("queryData","123").then(res=>{
? ? ? console.log("数据请求成功");
? ? })
? },
? methods:{
? ? ...mapActions(["queryData"])
? }
}
2.先通过mapActions进行映射到methods里面然后再去使用
import {mapActions,mapGetters} from "vuex"
export default {
? created(){
? ? this.queryData()
? },
? methods:{
? ? ...mapActions(["queryData"])
? }
}
getters:
1.this.$store.getters("getter的名字",传递的数据)
? <p>{{$store.getters.getSkill}}访问根仓库的getters</p>
2.先通过mapGetters进行映射到computed里面然后再去使用
import { mapGetters } from "vuex";
export default {
? computed: {
? ? ...mapGetters(["fullName"]),
? },
};
4.vuex子仓库的配置
// 导出的对象和仓库index.js的配置字段是一样的
export default{
// 模块化的仓库state是一个函数，像子组件中的一样
? ? state(){
? ? ? ? return{
? ? ? ? ? ? count:1,
? ? ? ? ? ? books:[],
? ? ? ? ? ? todos:[
? ? ? ? ? ? ? ? {id:1,text:"睡觉",done:false},
? ? ? ? ? ? ? ? {id:2,text:"吃饭",done:true},
? ? ? ? ? ? ? ? {id:3,text:"打豆豆",done:false},
? ? ? ? ? ? ? ? {id:4,text:"敲代码",done:true}]
? ? ? ? }
? ? },
? ? mutations:{
? ? ? ? setCount(state,v){
? ? ? ? ? ? state.count = v
? ? ? ? },
? ? ? ? setBooks(state,v){
? ? ? ? ? ? state.books = v
? ? ? ? }
? ? },
? ? getters:{
? ? ? ? // ?过滤未完成的事件
? umcomplete:(state,getters,rootState)=>{
? ?// state:本模块的数据
? ?// getters:仓库中所有的getters,包括根仓库种getters,如果添加了命名空间getters就是本模块的getters
? ?// rootState 根仓库的状态
? ? ? ? ? ? return state.todos.filter(v=>{
? ? ? ? ? ? ? ? return !v.done
? ? ? ? ? ? })
? ? ? ? },
? ? ? ? // 过滤出已经完成的
? ? ? ? done:(state,getters,rootState)=>{
? ? ? ? ? ? return state.todos.filter(v=>{
? ? ? ? ? ? ? ? return v.done
? ? ? ? ? ? })
? ? ? ? }
? ? },
actions:{
async getData(store,v){
var result = await axios.get("/myApi/lurker/carguide/getwar
ningmsg?city=zz&type=2")
//把数据存入books，利用setBooks
store.commit("setBooks",result.data.data.content)
? ? ? ? }
? ? },
? ? modules:{
? ? },
? ? // 使用命名空间,以后本模块的数据需要通过指定命名空间进行访问
? ? // 在index.js的modules字段配置当中给模块进行空间的命名
namespaced:true
}
注意：模块仓库设置namespaced:true意为允许设置模块名，可以在根仓库种进行设置模块子仓库的名字，方便后面使用。在根仓库设置模块仓库的名代码如下：
先对子仓库进行导入，命名为moduleA
import moduleA from "./module.js"
//在根仓库的modules中设置名为a?
modules: {
? ? a:moduleA
? }
5.使用子仓库
举例为根仓库下的a子仓库，在跟仓库命名为a
state
1 $store.dispatch("a/getData",100)
export default {
? ? created() {
? ? ? // 1直接使用.$store访问某块里面的action，dispatch函数的参数是"命名空间/action名字"
? ? ? this.$store.dispatch("a/getData",2)
? ? },
}
2先通过mapActions进行映射，...mapActions({b:"a/getData"}) ?this.b()
import {mapMutations} from "vuex"
export default {
? ? created() {
? ? ? ? this.b()
? ? },
? ? methods: {
?// mapActions()参数是一个对象 属性可以自定义属性，属性值模块中的action
? ? ? ...mapActions({b:'a/getData'}),? ?
? ? },
}
getters：
??1 $store.getters['a/done']
访问模块里面getter的时候 通过 $store.getters['a/getters']方式进行访问
? ? <p>{{$store.getters['a/done']}} 访问模块a里面的getters</p>
??2 先通过mapGetters进行映射，...mapGetters({b:"a/umcomplete",c:"a/done"})
import {mapGetters} from "vuex"
export default {
? computed:{
? ? ...mapGetters({b:"a/umcomplete",c:"a/done"})
? }
}
6.持久化存储
// 创建持久化存储对象
var vueLocal = new Vueinstance({
? // 存储方式,默认的是localStorage存储，可以修改成window.sessionStorage
? // storage:window.localStorage
? storage:window.sessionStorage
})
记得在组件中书写使用插件，使用持久化存储插件
? // 使用插件，使用持久化存储插件
? plugins:[vueLocal.plugin]
|