复习Vuex使用

一、Vuex是什么？为什么要用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 vuex中一共有五个状态 State Getter Mutation Action Module

二、安装

// npm  或Yarn安装

npm install vuex@next --save

yarn add vuex@next --save

三、配置

新建store文件->index.js，进行如下配置，在mian.js中进行引入

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
    
  },
  getters: {
    
  },
  //里面定义方法，操作state方发
  mutations: {
    
  },
  // 操作异步操作mutation
  actions: {
    
  },
  modules: {
    
  },
})

// main.js中

import store from './store'

new vue({
	router,
	store,
	render:h=>h(App)
}).$mount('#app')

四、使用

4.1 state

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data，在vuex中state中定义数据，可以在任何组件中进行调用

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
    name:"张三",
    age:18
  },
})

调用：

<template>
   <!-- 标签中直接使用 -->
  <div>{{$store.state.name}}---{{$store.state.age}}</div>
  <!-- mapState 辅助函数 -->
  <div>{{name}}----{{age}}</div>
</template>

<script>
import { mapState } from 'vuex'; // 从vuex中按需导入mapstate函数
export default {
  data() {
    return {
      
    };
  },
  created() {
    this.getPageData()
  },
  computed: {
    ...mapState(['name','age'])
  },
  methods: {
    getPageData() {
      // js中使用
      console.log(this.$store.state.name);
    },
  }
};
</script>

<style lang="less"></style>

4.2 Mutation

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

页面使用

<template>
  <!-- mapState 辅助函数 -->
  <div>
    <div>{{ name }}----{{ age }}</div>
    <button @click="nameClick">修改name</button>
    <button @click="ageClick">修改age</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex"; // 从vuex中按需导入mapstate函数
export default {
  data() {
    return {};
  },
  created() {
    this.getPageData();
  },
  computed: {
    ...mapState(["name", "age"]),
    // 第二种方式使用mapMutations
    ...mapMutations(['setName', 'addAge'])
  },
  methods: {
    getPageData() {
      console.log(this.$store.state.name);
    },
    // 第一种方式
    nameClick() {
      this.$store.commit('setName', '小黑')
    },
    ageClick() {
      this.$store.commit('addAge')
    },
  },
};
</script>

<style lang="less"></style>

store/index.js

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    name: "小张",
    age: 18,
  },
  mutations: {
    //其中参数state参数是必须的，也可以自己传递一个参数
    setName(state, name1) {
      state.name = name1;
    },
    addAge(state) {
      state.age += 10;
    },
  },
  actions: {},
  modules: {},
});

4.3 Action ——进行异步操作

Action和Mutation相似，Mutation 不能进行异步操作，若要进行异步操作，就得使用Action

页面使用

<template>
  <!-- mapState 辅助函数 -->
  <div>
    <div>{{ name }}----{{ age }}</div>
    <button @click="nameClick">修改name</button>
    <button @click="ageClick">修改age</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex"; 
export default {
  data() {
    return {};
  },
  created() {
    this.getPageData();
  },
  computed: {
    ...mapState(["name", "age"]),
    // 第二种方式使用mapMutations
    ...mapActions(['setName', 'addAge'])
  },
  methods: {
    getPageData() {
      console.log(this.$store.state.name);
    },
    // 第一种方式
    nameClick() {
      this.$store.dispatch('setName', '小黑')
    },
    ageClick() {
      this.$store.dispatch('addAge')
    },
  },
};
</script>

<style lang="less"></style>

store/index.js

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    name: "小张",
    age: 18,
  },
  mutations: {
    //其中参数state参数是必须的，也可以自己传递一个参数
    setName(state, name1) {
      state.name = name1;
    },
    addAge(state) {
      state.age += 10;
    },
  },
  actions: {
    setName(context, name1) {
      setTimeout(() => {
        context.commit('setName', name1)
      }, 2000)
    },
    addAge(context) {
      setTimeout(() => {
        context.commit('addAge')
      }, 2000)
    }
  },
  modules: {},
});