百川的博客

百川的博客
写点或者转载一些感觉精彩的文章,一起分享。见证下成长之路

vuex 使用小结 使用vuex

什么情况下应该使用 vuex ?

  • Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

    如果不打算开发大型单页应用,应用够简单,最好不要使用 Vuex。一个简单的 store 模式就足够了。但是,如果需要构建一个中大型单页应用,就要考虑如何更好地在组件外部管理状态,Vuex 是不错的选择。

核心

  • 以下是一步到位的配置. 分模块, 使用命名空间. 好处: 分模块好管理. 命名空间用来区分 dispatch, commit ... 等操作, 使用命名空间Action 可以重名.
  • 说明: namespaced, State, Mutation, Action, Getter

    • namespaced: 命名空间
    • state:包含了store中存储的各个状态。
    • mutation: 一组方法,是改变store中状态的执行者,只能是同步操作。
    • action: 一组方法,其中可以包含异步操作。
    • getter: 类似于 Vue 中的计算属性,根据其他 getter 或 state 计算返回值。
  • 示例代码:

    const state = {
       text: "测试1",
       testObj: { a: "测试a" }
    };
    
    const mutations = {
        SET_TEXT: (state, text) => {
        console.log("text测试1");
         state.text = text;
      }
    };
    
    const actions = {
        // dynamically modify permissions
        async changeRoles({ commit, dispatch }, role) {
        commit("SET_TEXT", "测试2");
       }
    };
    
    const getters = {
        getText(state) {
        // 通过方法访问
        return state.text + "-getters测试";
      }
    };
    
    export default {
        namespaced: true,
        state,
        mutations,
        actions,
        getters
    };
    

State

  • Vuex 使用 state 来存储应用中需要共享的状态。

Mutation

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

Action

  • 想要异步地更改状态,就需要使用action。action并不直接改变state,而是发起mutation。
  • 注: 请求接口可以在这里进行. 数据请求完了之后需要触发Mutation保存. 也就是说需要进行两步操作.
  • 利用async/await 进行组合action。代码更加简洁。

    actions: {
     async actionA ({ commit }) {
      commit('gotData', await getData())
     },
     async actionB ({ dispatch, commit }) {
       await dispatch('actionA') // 等待 actionA 完成
       commit('gotOtherData', await getOtherData())
     }
       }

Getter

  • 加工state成员给外界. 类似于 Vue 中的 计算属性(可以认为是 store 的计算属性),getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算

Q&A

  • 请根据示例代码对照阅读

    • 示例代码:

      const state = {
        text: "测试1",
        testObj: { a: "测试a" }
      };
      
      const mutations = {
          SET_TEXT: (state, text) => {
          console.log("text测试1");
          state.text = text;
        }
      };
      
      const actions = {
        // dynamically modify permissions
        async changeRoles({ commit, dispatch }, role) {
          commit("SET_TEXT", "测试2");
        }
      };
      
      const getters = {
         getText(state) {
           // 通过方法访问
           return state.text + "-getters测试";
         }
      };
      
      export default {
         namespaced: true,
         state,
         mutations,
         actions,
         getters
      };

组件如何接收state?

  • 在计算属性 computed 里获取
  • this.$store.state.module名称.text;
  // 方式1
  computed: {
      text() {
        return this.$store.state.test.text;
      },
   },

  // 方式2 (推荐.)
  computed: {
     ...mapState({
     text: (state) => state.test.text, // 使用ES6的箭头函数来给count赋值
    }),
  },

 // 方式3 数组方式  和方式2差不多, 不过没有方式2灵活. 略

 // 使用
 <p>{{ text }}</p>

如何改变数据/状态?

  • 用 commit 触发 mutations
  • 语法: commit(mutations 名称, 参数)

    • module内部触发(action)

      • action的第一个参数包含 commit, state, dispatch 函数, 使用es6解构进行获取

         const actions = {
               // dynamically modify permissions
              async changeRoles({ commit, state, dispatch }, role) {
              commit("SET_TEXT", "测试2");
            }
         };
    • 组件触发

      • 定义一个方法, 触发此方法.
      • 使用斜杠隔开, 进行区分. 语法: this.$store.commit("module名称/mutations 名称", 参数);

        methods: {
            changeTextCommit() {
             this.$store.commit("test/SET_TEXT", "改变了1");
            },
        },
      • 触发此方法后会进入以下代码.

         
        
        const mutations = {
            SET_TEXT: (state, text) => {
                console.log("text测试1");
                state.text = text;
            }
         };
        

如何触发action? 当前module触发其他module的action?

  • 组件使用dispatch 触发action.
  • 语法: this.$store.dispatch("module名称/action名称", 参数);

     methods: {
          changeTextDispatch() {
             this.$store.dispatch("test/changeRoles");
          },
      },
  • module里触发dispatch

       logout({ commit, state, dispatch }) {
           dispatch("tagsView/delAllViews");
       }
    
    

如何请求数据, 并把数据更新?

  • 请求数据并更新需要进行两步操作

    1. 在action里编写请求操作
    2. 请求到数据后用 commit 触发 mutations 进行更新

            
      
       const actions = {
             // dynamically modify permissions
            async changeRoles({ commit, state, dispatch }, role) {
            commit("SET_TEXT", "测试2");
          }
       };
      

getter设置与获取

  • 设置

    const getters = {
      getText(state) {
        // 加工后的text字符串
        return state.text + "-getters测试";
      }
    };
  • 组件获取. 语法: this.$store.getters["模块名/getter方法名"];

    computed: {
       textGetters() {
         console.log(this.$store);
         console.log(this.$store.getters["test/getText"]);
         return this.$store.getters["test/getText"];
       },
    },
    

总结

  • 一定要开启命名空间.
本原创文章未经允许不得转载 | 当前页面:百川的博客 » vuex 使用小结 使用vuex

评论