VueX总结

---

前言

Vuex是实现组件全局状态(数据)管理的一种机制,可以方便实现组件之间的数据共享

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vuex是什么

1. 在使用Vue构建复杂的大型应用时,Vuex会使我们事半功倍.
2. Vuex 相当于一个公共仓库,里面保存着所有组件都能共用的数据,而且数据都是响应式
3. 不能直接修改Vuex的状态,必需通过Vuex中的 Mutations 来实现
4. Vuex是由五个部分组成(State,Getters,Mutations,Actions,Modules)

应用场景

1. 组件传值:日常业务通过父子,兄弟传值可以解决;但是如果是没有任何关联的组件要使用同一组数据时,就会很难受;这个时候Vuex就可以很好的解决
2. 同时修改多个状态时:当我们修改一个值时,有时可以会需要同时修改多个组件;这个时候使用传值就太过于麻烦;可以在Vuex保存组件中共用的值,可以通过修改Vuex 中的值同时修改多个组件

Vuex基础代码

const store = new Vuex.Store({
   state,//共同维护一个状态,state里面可以是很多个全局状态
   getters,//计算属性,获取数据并渲染
   actions,//提交mutations修改数据,与mutations功能类似,数据的异步操作
   mutactions,//处理数据的唯一途径,state的改变或赋值只能在这里
})

二、state

提供的公共数据源，所有共享的数据统一放到store文件中的state进行储存，类似data
state 中的数据可以在任何组件中使用

代码展示–使用步骤

第一步在state 定义数据

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
  //第一步定义数据
    msg: 'this is Vuex',
    name: '张三',
    age: '18'
  },
  mutations: {},
  actions: {},
  modules: {}
});

第二步使用Vuex数据

<template>
  <div id="app">
      <h1>vuex使用</h1>
      <div>直接使用 
        	// 使用方式1 直接使用
          <div>{{$store.state.msg}}</div>
          <div>{{$store.state.name}}</div>
          <div>{{$store.state.age}}</div>
        </div>
        <hr />
        <div>
		// 方式2  3.在页面中使用通过 mapState 获取的数据
          辅助函数
          <div>{{msg}}---{{name}}---{{age}}</div>
        </div>
  </div>
</template>
<script>
// 方式2 1.导入 mapState 辅助函数
import { mapState } from 'vuex'
export default {
// 方式2  2.通过计算属性获取需要使用的数据
  computed:{
    ...mapState(["msg","name","age"])
  },
}
</script>

三、Getters

从 state中派生出的一些状态,例如对象列表进行过滤并计数
Getters 可以对 store 中已有的数据加工处理之后形成新的数据,类似于 Vue的计算属性

代码展示-使用步骤

第一步:在state 中定义数据,通过 getters 进行过滤

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    age: 18,
    todos: [
      { id: 1, text: 'this is true', done: true },
      { id: 2, text: 'this is false', done: false }
    ]
  },
  // 对数据进行过滤,类似与计算属性
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    //接收参数 num, 对数据进行修改
    demoGetters: (state) => (num) => {
      return state.age + num
    },
    newCount:state => state.age * 3
  },
  mutations: {},
  actions: {},
  modules: {}
});

第二步: getters 的使用

<template>
  <div id="app">
    <h1>Getters</h1>
    // 使用方式1:直接使用 getters 中的方法 
      <div>直接使用:{{$store.getters.doneTodos}}</div>
      <hr />
      	// 方式2 3.在页面中使用
        <div>辅助函数1:{{doneTodos}}</div>
		// 对getters 传参
        <div>辅助函数2:{{demoGetters(2)}}</div>
        <div>辅助函数3:{{newCount}}</div>
  </div>
</template>
<script>
// 方式2  1.使用辅助函数
import { mapGetters} from 'vuex'
export default {
  computed:{
  // 方式2  2.导入 getters 中的方法
    ...mapGetters(['doneTodos','demoGetters']),
    // getters 使用方式
      newCount(){
          return this.$store.getters.newCount;
      }
  },
}
</script>

三、Mutation

更改 store 中的state的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

注意

• 修改state 只能通过 mutation
• mutation 中定义的方法,方法中的参数其中state 是必须要传递的参数,也可以传递自己需要的参数
• mutation中的方法不能直接调用,要通过调用this.$store.commit 方法
• mutation不能进行异步操作,Vuex中进行异步操作要通过Action

代码展示-使用步骤

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
  // 定义数据
    count: 1,
  },

  mutations: {
  // 通过 mutation 改变 state
    addNum (state,n) {
      // 变更状态
      state.count+=n
    }
  },
  actions: {},
  modules: {}
});

<template>
  <div id="app">
    <h1>Nutations</h1>
    <div @click="addCount">click:{{$store.state.count}}</div>
  	  //	使用辅助函数调用的方法
     <button @click="addNum(2)">click:{{$store.state.count}}</button>
  </div>
</template>
<script>
import { mapState ,mapGetters} from 'vuex'
export default {
  data () {
    return {
      userId: 1235555,
      num: '151515'
    }
  },

  methods: {
  	// 方式2 : 1通过辅助函数调用对应方法
    // 辅助函数调用的方法可以直接在页面中使用
    ...mapMutations(['addNum']),
    addCount(){
    //使用方式1:直接通过 store.commit 调用方法
    	this.$store.commit("addCount",2)
    },
  }
}
</script>

四、Action

Action和Mutation类似，Mutation 不能进行异步操作，若要进行异步操作只能通过Action

注意

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。
• Actions函数接受一个store 实例具有相同方法和属性的 context对象,因此你可以调用context.commit 提交一个mutation
• 或者通过context.state 和 context.getters来获取 state 和 getters

代码展示

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 1,
  },
  getters: {},
  mutations: {
    increment (state,n) {
      state.count+=n
    }
  },
  actions: {
    increment (context,n) {
      context.commit('increment',n)
    }
  },
  modules: {}
});

// 页面代码
<template>
  <div id="app">
  <div>
    <h1>Actions</h1>
  <div @click="clickActions">click{{$store.state.count}}</div>
  <div @click="increment(5)">click{{$store.state.count}}</div>
  </div>
    <router-view />
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {

  methods: {
  // 使用方式2: 使用辅助函数 调用actions 方法
    ...mapActions(["increment"]),
  
    clickActions(){
      // 使用方式1:通过 dispatch 调用 
      this.$store.dispatch("increment")
    },
  },
};
</script>

五、Module

当我们 store 中的状态过多时,应用就会变的非常复杂, store 对象就可能变得相当臃肿,不利于维护
为了解决这个问题,Vuex 允许我们将 store 分割成模块 module. 每个模块拥有自己的 state,mutation,actions,getter,甚至是嵌套子模块-从上至下进行同样的方式分割

代码展示

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  
  modules: {
    oneModules:{
      state:{
        count:1
      },
      mutations:{
        addCount(state){
          state.count += 2
        }
      }
    },
    twoModules:{
      state:{
        msg:"我是 modules 里面的值"
      }
    }
  }
});

<template>
  <div id="app">
  <div>
    <h1>Modules</h1>
    // 使用 modules 中定义的状态
    <div>{{$store.state.twoModules.msg}}</div>
    <div @click="clickModule">{{$store.state.oneModules.count}} </div>
  </div>
    <router-view />
  </div>
</template>
<script>
export default {
  methods: {
    clickModule(){
    //	调用 modules 中的方法
      this.$store.commit('addCount',)
    },
  },
};
</script>

总结

• module 待总结