vuex的基本使用

一、Vuex是什么？

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

二、vuex的5个核心属性：

1. state：vuex的基本数据，用来存储变量，可以把它是为vue中的data。

2. getters：可以把它是为vue中的computed，计算属性，可以对state中的变量进行处理。

3. mutations：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，可以把它视为vue中的methods。

• mutation必须是同步的，异步使用action。
• mutation使用 store.commit 方法触发。

4. actions：它类似于上面的mutations，但是它又跟mutations有所不同。

• action 提交的是 mutation，而不是直接变更状态。
• action 可以包含任意异步操作。
• action通过 store.dispatch 方法触发。

5. modules：模块，当我们的应用很大时，所有的状态都集中在一个store对象里，显得臃肿不堪，这时可以将store分割到模块，每个模块都有自己的state、getters、mutations、actions。

在项目中常用的：this.$store.state、this.$store.getters、this.$store.dispatch、this.$store.commit

三、vuex的使用

1. 首先安装vuex的依赖

npm install vuex --save

2. 在main.js文件中引入vuex

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

3. 在main.js文件的同级创建一个store.js文件

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
　　state:{
　　　　name:"初始的name"
　　},
　　getters:{
　　　　// 第一个参数是state,第二个是getters
　　　　dealName(state,getters){
　　　　　　return "处理一下的name,值为："+state.name
　　　　}
　　},
　　mutations:{
　　　　// 第一个参数是state,第二个参数为提交载荷，emmm，赋值的新值
　　　　setName(state,payload){
　　　　　　　state.name = payload
　　　　}
　　},
　　actions:{
　　　　// 第一个参数为对象，与store 实例具有相同方法和属性的 context 对象，第二个参数与mutation一样
　　　　setNameAction({commit},payload){
　　　　　　commit("setName",payload)
　　　　}
　　}
})

4. 在main.js文件中引入store.js

 import Vuex from "vuex";
 import store from "./store";
 Vue.use(Vuex);
 new Vue({
  render: h => h(App),
  store
 }).$mount('#app');

5. 在组件中使用store

<template>
  <div>

    <div>name:{{name}}</div>
    <div>getter处理的name:{{dealName}}</div>
    <button @click="changename">改变name</button>
  
  </div>
</template>
<script>
export default {
  name: "index",
  computed: {
    name() {
      return this.$store.state.name;
    },
    dealName() {
      return this.$store.getters.dealName;
    }
  },
  created() {
    console.log(this.$store);
  },
  methods: {
    changename() {
　　　　// 下面两种方式都可以改变state中name的值，分别是对应action和mutation
      // this.$store.dispatch("setNameAction", "action改变name");
      this.$store.commit("setName", "mutation改变name");
    }
  }
};
</script> 

 

 

 6. 将store分割成模块，修改store.js文件

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
    // 以下store被分割成2个模块,user、application
    modules: {
        user: {
            state: {
                name: "初始的name"
            },
            getters: {
                // 第一个参数是state,第二个是getters
                dealName(state) {
                    return "处理一下的name,值为" + state.name;
                }
            },
            mutations: {
                // 第一个参数是state,第二个参数为提交载荷，emmm，赋值的新值
                setName(state, payload) {
                    state.name = payload;
                }
            },
            actions: {
                // 第一个参数为对象，与store 实例具有相同方法和属性的 context 对象，第二个参数与mutation一样
                setNameAction({ commit }, payload) {
                    commit("setName", payload);
                }
            }
        },
        application: {
            state: {
                title: "初始标题"
            },
            getters: {
                // 第一个参数是state,第二个是getters
                dealTitle(state) {
                    // 虽然getter不能接受外面传进的参数，但是我们可以将返回值处理成方法去接受参数
                    return (type) => {
                        return type + state.title;
                    };
                }
            },
            mutations: {
                // 第一个参数是state,第二个参数为提交载荷，emmm，赋值的新值
                setTitle(state, payload) {
                    state.name = payload;
                }
            },
            actions: {
                // 第一个参数为对象，与store 实例具有相同方法和属性的 context 对象，第二个参数与mutation一样
                setTitleAction({ commit }, payload) {
                    commit("setTitle", payload);
                }
            }
        }
    }

});

7. 修改一下组件的使用

<template>
  <div>
    <div>name:{{name}}</div>
    <div>getter处理的name:{{dealName}}</div>
    <button @click="changename">改变name</button>
    <div>title:{{title}}</div>
    <div>getter处理的title:{{dealTitle}}</div>
  </div>
</template>
<script>
export default {
  name: "index",
  computed: {
    name() {
      // name是user模块中的，因此需要user.name
      return this.$store.state.user.name;
    },
    dealName() {
      return this.$store.getters.dealName;
    },
    title() {
      return this.$store.state.application.title;
    },
    dealTitle() {
      // dealTitle返回的是个方法，我们可以传参
      return this.$store.getters.dealTitle("demo应用的");
    }
  },
  created() {
    console.log(this.$store);
  },
  methods: {
    changename() {
      // this.$store.dispatch("setNameAction", "action改变name");
      this.$store.commit("setName", "mutation改变name");
    }
  }
};
</script>