vue中vuex的使用

vuex是什么

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它允许我们在应用程序中集中管理和控制数据的状态。通过将数据存储在一个全局的状态树中，我们可以方便地在不同的组件中进行数据共享和通信。使用Vuex可以更好地组织和管理大型的Vue.js应用程序。

vuex的组成

1. State（状态）：将应用程序的状态集中存储在一个单一的对象中。在Vuex中，我们使用state对象来存储应用程序的状态数据。

2. Mutations（突变）：用于修改或更改状态的函数。每个mutation都有一个字符串类型的事件类型和一个回调函数，在回调函数中实际进行状态的改变。

3. Actions（动作）：类似于mutations，但是可以包含异步操作。Actions通过调用mutations来改变状态。它们可以包含任意异步操作，例如API请求。

4. Getters（获取器）：用于从应用程序的状态中派生出一些衍生数据。Getters可以理解为对state的计算属性，可以将它们视为store中的一些方法。

5. Modules（模块）：用于将store分割成多个模块。每个模块都有自己的state、mutations、actions和getters。这使得大型应用程序的状态管理更加灵活和可维护。

vuex的使用（1.0版）

场景：在组件A中改变组件B的状态，并实时渲染到页面上

目录结构：

1.vuex的状态管理方法和逻辑写在store/index.js中（存数据执行步骤:actions--->mutations-->state，取数据：通过getters方法返回数据）

2.在main.js里面注册使用

3.在组件A中通过点击事件，把数据存到vuex里面

4.在组件B中拿到数据，并实时渲染到页面上（以上步骤在组件A中改变组件B的状态，并实时渲染到页面上）

5.另附三种监听vuex值的变化的方法  (在watch中监听需要number在state中有初始值，监听的是对象时需要深度监听（deep：true）)

1）

2)

3)

6.具体实现代码

1）store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    number: 2,//在watch里面监听要有初始值,computed里面不用
  },
  getters: {
    getData(state) {
      return state
    }
  },
  actions: {
    setData({ commit }, [data, key]) {
      commit("saveData", [data, key])
    }
  },
  mutations: {
    saveData(state, [data, key]) {
      state[key] = data
    }
  }
})

2)main.js

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
import store from './store'
Vue.use(ElementUI);
Vue.config.productionTip = false;
Vue.prototype.$eventBus = new Vue();
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3)组件A

<template>
    <div class="a" @click="clickA">
        A页面
    </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
    name: "A",
    data() {
        return {
            count: 0,

        };
    },
    created() { },
    beforeDestroy() {

    },
    methods: {
        ...mapActions(["setData"]),
        clickA() {
            this.count++;
            this.setData([this.count, "number"]);
        }
    },
};
</script>
<style scoped>
.a {
    color: blue
}
</style>

4）组件B

<template>
    <div class="b">
        B页面{{ getData.number }}

        <!-- B页面{{ num }} -->
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "B",
    data() {
        return {
            num: 0,
        };
    },
    created() {
    },
    beforeDestroy() {
    },
    methods: {

    },
    computed: {
        ...mapGetters(["getData"]),

        // ...mapState(["number"])

    },

    watch: {
        // number: {
        //     handler(newVal, oldVal) {
        //         this.num = newVal
        //     },
        //     deep: true
        // }

        // getData: {
        //     handler(newVal, oldVal) {
        //         this.num = newVal.number
        //     },
        //     deep: true
        // },

        // '$store.state': {
        //     handler(newVal, oldVal) {
        //         this.num = newVal.number
        //     },
        //     deep: true
        // }
    },

};
</script>
<style scoped></style>

vuex的使用（2.0版）

1.store/index.js

import persistedState from "vuex-persistedstate";
import vue from "vue";
import Vuex from "vuex";

vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    currentRoute: "",
  },
  getters: {
    currentRoute: state => {
      return state.currentRoute;
    },
  },
  mutations: {
    setCurrentRoute(state, value) {
      state.currentRoute = value;
    },
  },
  actions: {},
  modules: {},
  plugins: [
    persistedState({
      storage: window.sessionStorage,//数据持久化
    })
  ]
});

export default store;

2.main.js里面全局注册

import '@/css/main.css'
import '../static/font/iconfont.css'
import Vue from 'vue'
import App from './App.vue'
import router from './router';
import store from "./store";  //关键地方1
import ElementUI from 'element-ui';
import "./style.less";

import { Message } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.prototype.$message = Message
Vue.use(router);

 new Vue({
    el: '#app',
    router,
    store,//关键地方2
    components: {App},
    template: '<App/>'
 })

3.存数据（在组件中或者需要存数据的地方存入数据）

    this.$store.commit("setCurrentRoute", "login");

4.组件中使用数据

1)import {mapGetters, mapState} from "vuex";//需要引入mapState


2)//计算属性中注册要使用的vuex里面的值
computed: {
    ...mapState(["currentRoute"])
},


3)//函数中使用
if (this.currentRoute === "login") {
     //todo
}

4)//template中使用
<div v-if="currentRoute==='login'"> </div>

5.监听值的变化

watch: {  
  currentRoute: {
      handler(newVal, oldVal) {
        if (newVal) {
             //todo
        }
      },
      deep: true,//对象的话需要深度监听
      immediate: true,  //加上则首次也监听
    },
}