vuex的学习

vuex

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

vuex安装：
1. npm install vuex --save
2. 在main.js中引入

import vuex from 'vuex'
Vue.use(vuex);
var store = new vuex.Store({//store对象
    state:{
        show:false
    }
})

文件夹目录：

vuex中的state,getters,mutations,actions的使用

main.js

import Vue from 'vue'
import App from './App'
import vuex from 'vuex'
import Store from './assets/store'
Vue.use(vuex);
Vue.config.productionTip = false
/* eslint-disable no-new */
var store = new vuex.Store({//store对象
  modules: {
    dialog: Store
  }
})
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

store.js

export default {
    state: {
        showInfo: "我是vuex",
        show: true,
        showone: false
    },
    getters: {
        not_show(state) {//这里的state对应着上面这个state
            return (!state.show + !state.showone);
        }
    },
    mutations: {
        switch_dialog(state) {//这里的state对应着上面这个state
            debugger
            state.show = state.show ? false : true;
            //你还可以在这里执行其他的操作改变state
            debugger
        },
        switch_dialogtwo(state) {//这里的state对应着上面这个state
            debugger
            state.showone = state.showone ? false : true;
            //你还可以在这里执行其他的操作改变state
            debugger
        }
    },
    actions: {
        switch_dialogtwo(context) {//这里的context和我们使用的$store拥有相同的对象和方法
            context.commit('switch_dialogtwo');
            //你还可以在这里触发其他的mutations方法
        },
    }

}

HelloWorld.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
    {{ $store.state.dialog.showInfo }}
    <button @click="$store.commit('switch_dialog')">点击mutations</button>
    <button @click="$store.dispatch('switch_dialogtwo')">点击actions</button>
    <!-- <button @click="$store.getters.not_show">点击getters</button> -->
    {{ $store.getters.not_show }}
    <div
      v-if="$store.state.dialog.show"
      style="width: 100px; height: 100px; background-color: red"
    ></div>
    <div
      v-if="$store.state.dialog.showone"
      style="width: 100px; height: 100px; background-color: green"
    ></div>
    <div
      v-if="show"
      style="width: 100px; height: 100px; background-color: black"
    ></div>
    {{ show }}
  </div>
</template>

<script>
import { mapState } from "vuex";
import { mapActions } from "vuex";
export default {
  name: "HelloWorld",
  computed: {
    //这里的三点叫做 : 扩展运算符
    ...mapState({
      show: (state) => state.dialog.show,
    }),
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  methods: {
    ...mapActions({
      change: "switch_dialog", 
    }),
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>