VUEX理解

Vuex 是一个专为 Vue.js
应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vueX官方文档

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false

new Vue({
  store, //一旦引用所有的组件都可以使用 store
  render: h => h(App),
}).$mount('#app')

app.vue

<template>
  <div id="app">
    <!-- <div>{{ $store.state.lession }}</div>
    <div>{{ $store.state.room }}</div> -->
    <!-- <div>{{ $store.state.user.userName }}</div> -->
    <div>{{ lession }}</div>
    <div>{{ room }} <button @click="changeRoom"> 更改</button></div>
    <!-- <div>{{$store.getters.getNewName}}</div> -->
    <div>{{ getNewName }}</div>
    <div>{{ userName }}</div>
    <div>{{getUserName}}</div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex"; //引入辅助函数
// mapState(['lession','room'])
export default {
  components: {},
  computed: {
    // lession(){
    //   return this.$store.state.lession;
    // },
    // room(){
    //   return this.$store.state.room
    // }
    ...mapState(["lession", "room"]),
    ...mapGetters(["getNewName"]),
    ...mapState("user", ["userName"]),//要暴露到全局，指定命名空间namespaced
    ...mapGetters('user',['getUserName'])
  },
  methods:{
    changeRoom(){
      // this.$store.commit('change_room','302') //commint唤醒mutations修改参数
     this.$store.commit('user/change_name',"修改-自定义名称")//非根文件，要加上模块名
    //  异步的要派发一个指令
    this.$store.dispatch({
      type:'change_room',
      room:'222222'
    });
    }
  }
};
//官方推荐使用辅助函数 mapState,mapGetters,mapActions,mapMutations,creat...
</script>

<style>
</style>

store/index.js

import Vue from 'vue';
import VueX from 'vuex';
import state from './state';
import getters from './getters';
import mutations from './mutations';
import actions from './actions';
import user from './modules/user'
Vue.use(VueX)
export default new VueX.Store({  //store必须大写
    strict: process.env.NODE_ENV !== 'production',// 生产环境关闭严格模式，降低性能损耗
    // state: {      
    // },
    // mutations: { //同步
    // },
    // actions: {  //异步
    // },
    state, //根级别
    getters, //getter可以认为是store的计算属性，返回值会根据它的依赖缓存起来，只有依赖值发生改变
    mutations, // 只能在这里修改
    actions,
    modules: {  //自定义  模块级别
        user
    }
})

store.js

export default {
    lession: "框架课程",
    room:'618'
}

mutations.js

export default {
    change_room: (state, payload) => {
        state.room= payload
    }
}

actions.js

export default {
    //  actions里面调用commit找到mutations
    change_room({ commit }, obj) {
        setTimeout(() => {
            commit(obj.type, obj.room) //找到mutations中的change_room 方法
        }, 1000);
        
    }
 }

要点