Vuex中的核心应用store(仓库)

在Vuex中 store就相当于一个仓库容器，里面可以存取数据

1.Vue项目的结构，和store位置

在使用store的时候我们需要创建一个store的file文件，在里面写一个js用来寄存他的读取状态

2.vuex的核心概念

vuex中有5个核心概念分别是 state,getters,mutations,acitons,module

//index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const store = new Vuex.Store({
  state:{
  },
  getters:{
  },
  mutations:{
  },
  actions:{
  },
  Module:{
  }
})

具体介绍可以去看文档 State | Vuex
store的具体使用流程

State单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    //类型没有规定
    testFlag:false, //在这里存储你的状态
    testList:{},  
  }
})

Getter用来在js页面中读取你要的状态

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    //类型没有规定
    testFlag:false, //在这里存储你的状态
    testList:{},  
  }
  getter:{
    getTestFlag:state =>state.testFlag, //就和java里面个get，set操作一样
    getTestList:state =>state.testList,
  }
})

js页面的读取操作 (记得使用mapGetters 辅助函数映射局部属性) 具体看文档

//testGetter.js
import {mapGetters} from 'vuex' //mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

export default{
  name: "test-getter",//设置名字
  created(){
    if(this.getTestFlag){  //从store中获取getTestFlag并判断true/false;
      
    }
    
    if(this.getTestFile==null){  //与上一步一样 测试数据，判断getTestFile为空？
    }
  }
}

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,在store中的配置

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    //类型没有规定
    testFlag:false, //在这里存储你的状态
    testList:{},  
  },
  getter:{
    getTestFlag:state =>state.testFlag, //就和java里面个get，set操作一样
    getTestList:state =>state.testList,
  },
  mutations:{
    SetTestFlag(state,data){ //设置改变TestFlag的值data和state状态
      state.testFlag=data    //data具体传值看下面的testMutation\
    } 
    SetTestList(state,data){
      state.testList=data    //同上
    } 
  }
})

在这里我们需要对state赋值，所以单独一个js文件用来写入state状态改变他的值

//testMutation.js
export default {
  name:"test-mutation",
  created(){  
    this.$store.commit("SetTestFlag",true)  //使用commit方法来存入,将TestFlag改为true
    this.$store.commit("SetTestList",this.lists); //同上
  },
  data(){
    lists:[{
      name:"我是测试数据用来放入SetTestList",
      code:"0",
    }]
  }
}

到这里store的基本使用已经可以完成

Action和Module本人使用较少，本文给入门的同学参考，有的了解这个的大佬也可以补充一下。