stroe使用

state //数据源

state: { name:'yyf',},
this.$store.state.属性

  computed:{
      name(){ return this.$store.state.name} 
    // ...mapState(['name']) // ...mapState({name:'name'}) //对象语法
  }

mutations

 this.$store.commit(" mutation函数"，参数) //提交，参数传进去  -----传参的方式（又叫--提交载荷）

@第一种

   //仓库数据
    state: {  name:'yyf',},
    mutations: {
     cahnge(state,data ) {  state.name = data  }
   },
    // 页面中使用
    <button @click="setStore_name('hhhhh')">改变数据</button>
   setStore_name(val){ //点击事件  val参数
       this.$store.commit('cahnge','99999999999')
     },

@第二种 mutations-type.js

   仓库下新建 mutations-type.js
      export const UPDATA = 'UPDATA' //导出变量
    //导入
    import { UPDATA } from '../store/mutations-type.js'
    //仓库数据
    state: {  name:'yyf',},
    mutations: {
     [UPDATA]:function(state,value) {
         state.name = value
       },
     },
    // 页面中使用
    <button @click="setStore_name('hhhhh')">改变数据</button>
    setStore_name(val){ //点击事件  val参数
       this.$store.commit('UPDATA','99999999999') //传参
     },

@第三种 mapMutations简写

    //仓库数据
    state: {  name:'yyf',},
    mutations: {
     cahnge(state,val) {
        state.name = val  // 默认收集 cahnge(xxx) 传过来的val  
       }
     },
    // 页面中使用
    <button @click="cahnge(xxx)">改变数据</button>
    import { mapMutations} 'vuex';
      computed:{
           ...mapMutations(["cahnge"]), //数组语法 事件名和同步提交函数同名   可直接使用 ,
         同理可以使用mutations-type.js 里的变量
       //  ...mapMutations({UPDATA(事件名):'UPDATA'(提交的函数名)}),  // 对象语法
     },

actions异步处理

actions: {
        increment(state,val) {
           state.name = val  // 
         }
},

页面中使用
   <button @click="increment(xxx)">改变数据</button>
   import { mapActions } 'vuex';
 - @第一种
increment(){
 this.$store.dispatch('increment','99999999999') //传参
}
-  @第二种
...mapActions(["increment"]), //数组语法 事件名和同步提交函数同名   可直接使用 ,
            同理可以使用mutations-type.js 里的变量
 ...mapActions({increment(事件名):'increment'(提交的函数名)}),  // 对象语法

getters使用

// 一般写入复用的数据处理方法，多个组件使用，方法必须return 出去和计算机属性类似

-@ 第一种
const state = {
    num:9
}
const getters = {
    resetval(state){
       return state.num*1000 
   }
}
使用：
this.$stroe.getters.resetval
{{$stroe.getters.resetval}}
-@第二种
... mapGetters(['resetval'])
... mapGetters({ resetval：'resetval'})

module

const moduleA = {
  namespaced:true,//开启命名空间
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: {
      toval(){ return xxx}
   }
}

const moduleB = {
  namespaced:true,//开启命名空间
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
页面中使用
- @ 获取state数据 state.a.xxx
使用分包里的方法
- @常用 
- ...mapState('a //对应的分包名)',['name']) //可以直接结构使用 ！！！ 前提必须开启命名空间
- ...mapActions('a //对应的分包名'，["increment"]) //数组语法
- ...mapActions('a //对应的分包名',{increment(事件名):'increment'(提交的函数名)}), //对象语法
- ... mapGetters('a //对应的分包名',['resetval']) 
- 注意！！this.$store.commit('a//对应的分包名/cahnge','99999999999') //commit('分包名/方法属性','参数') 
- 注意！！this.$store.dispatch('a/increment','99999999999') //必须这样使用 dispatch('分包名/方法属性','参数') 
- 注意！！this.$stroe.getters['a/toval'] // 如果要写this.$stroe.getters方式， 分模块必须这样使用 this.$stroe.getters['分包名/属性方法']
-注意！！计算机属性里只能使用 mapState ，计算机属性，依赖数据与watch相似

使用 require.context 导入模块

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /.js $/) const modules= modulesFiles.keys().reduce((a,b) => { const moduleName = b.replace(/^\.\/(.*)\.\w+$ /, '$1')
const value = modulesFiles(b)
a[moduleName] = value.default
return a
},{});
export default new Vuex.Store({
modules,
})
eg: 模块1举例
export default {
namespaced: true,
state: { name: '222222222' },
mutations: {
chagne: function (state, value) {
state.name = value
},
},
actions: { }
}