美文网首页技术Vue
vuex核心原理

vuex核心原理

作者: 不染事非 | 来源:发表于2019-04-22 16:28 被阅读162次
    首先:Vuex是什么?

    有关于Vuex,官网是这样定义的:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
    我是这么认为的:Vuex是为了解决多个组件共享状态而存在的。他能够有效的解决兄弟组件,父子组件,爷孙组件的传值。他将组件的共享状态抽取出来,以一个全局单例模式管理。

    Vuex有以下5个重要属性:
    1、State

    单一状态树,每个应用将仅仅包含一个 store 实例。

    2、Getter

    可以认为是 store 的计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

    3、Mutation

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

    4、Action

    类似于 mutation,在于Action 提交的是 mutation,而不是直接变更状态;Action 可以包含任意异步操作

    5、Module

    Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter。模块内部的 action、mutation 和 getter 是注册在全局命名空间的。

    1、不使用Module开发

    文件存放
    
    └── store
        ├── index.js          # 我们组装模块并导出 store 的地方
        ├── state.js          # 跟级别的 state
        ├── getters.js        # 跟级别的 getter
        └── mutations.js      # 根级别的 mutation
    
    

    index.js存放的内容

    import vue from 'vue';
    import vuex from 'vuex';
    import state from './state.js';
    import * as getters from './getters.js';
    import mutations from './mutations.js';
    
    vue.use(vuex);
    
    export default new vuex.Store({
      state,
      getters,
      mutations
    });
    

    state.js存放的内容

    const state = {
      name: 'jwl',
      age: 24
    };
    
    export default state;
    
    
    getters.js存放的内容
    
    export const name = (state) => {
        return state.name;
    }
    
    export const age = (state) => {
        return state.age
    }
    
    export const other = (state) => {
        return `My name is ${state.name}, I am ${state.age}.`;
    }
    

    mutations.js存放的内容

    export default {
        SET_NAME(state, name) {
            state.name = name;
        },
        SET_AGE(state, age) {
            state.age = age;
        }
    };
    

    main.js存放的内容

    import App from './App.vue';
    import Vue from 'vue';
    import router from './router/index.js'
    import vuex from 'vuex'
    import store from './store'
    
    Vue.use(vuex);
    
    new Vue({
      el: '#app',
      router,
      store,
      render: h => h(App)
    })
    

    在组件中使用

    <template>
      <div>
        姓名 {{name}} 
        <br>
        年龄 {{age}}
        <br>
        {{other}}
        <input @click="changeName" type="button" value='改变名字'>
      </div>
    </template>
     
    <script>
    import { mapGetters, mapMutations ,mapState} from "vuex";
    
    export default {
      components: {},
      computed: {
        ...mapGetters(["name", "age", "other"])
        
        //也可以用这个,但mapGetters要强大
        //...mapState(["name", "age", "other"])
      },
      created() {},
      methods: {
        ...mapMutations({
          setName: "SET_NAME",
          setAge: "SET_AGE"
        }),
        changeName() {
          this.setName("jiawan");
        }
      }
    };
    </script>
    

    2、使用Module开发

    文件存放
    
    └── store
        ├── index.js          # 我们组装模块并导出 store 的地方
        └── modules
            ├── demo1.js         # 模块1
            └── demo2.js         # 模块2
    
    

    index.js存放的内容

    import vue from 'vue';
    import vuex from 'vuex';
    import demo1 from './modules/demo1.js';
    
    vue.use(vuex);
    
    export default new vuex.Store({
      modules: {
        demo1
      }
    });
    

    demo1.js存放的内容

    const demo1 = {
      state: {
        names: `demo1`
      },
      mutations: {
        change2(state, va) {
          state.names = va.new;
        }
      },
      getters: {
        names(state, getters, rootState) {
          return state.names + 'hhhhh'
        }
      }
    }
    export default demo1;
    

    main.js存放的内容不变
    在组件中使用

    <template>
      <div>
        <br>
        //state内容,也可以在计算属性里面
        {{$store.state.demo1.names}}
        <br> 
        {{demo1name}} 
        <input @click="changeDemo1Name" type="button" value='改变demo1名字'>
      </div>
    </template>
     
    <script>
    export default {
      components: {
      },
      computed: {
        //getters内容
        demo1name() {
          return this.$store.getters.names;
        }
      },
      created() {},
      methods: {
        changeDemo1Name() {
          this.$store.commit("change2", {
            new: "修改了修改了..."
          });
        }
      }
    };
    </script>
    

    相关文章

      网友评论

        本文标题:vuex核心原理

        本文链接:https://www.haomeiwen.com/subject/fucugqtx.html