vuex安装及使用

vuex官网文档:点我进入

作用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，为了解决兄弟组件或者多层组件传值问题，任何组件都可以直接访问vuex上的数据或方法。

安装

npm install vuex -S

引入

import Vue from "vue";
//引入vuex
import Vuex from "vuex";
import App from "./App.vue";
import router from "./router";
// 使用vuex
Vue.use(Vuex)

//创建vuex实例
let store = new Vuex.Store({
  state: {
    count: 0
  }
})
// 阻止显示生产模式的消息
Vue.config.productionTip = false;

new Vue({
  router,
  store, //在根实例中注册store 子组件能通过 this.$store访问
  render: h => h(App)
}).$mount("#app");

使用

Vuex 使用单一状态树（用一个对象就包含了全部的应用层级状态）。至此它便作为一个“唯一数据源 ”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。

核心概念

• State 状态 相当于data数据
• Getter 获得者 相当于computed计算属性
• Mutation 变化 相当于method方法 写同步方法 主要是操作data中的数据
• Action 行动 写异步方法 Module 译模块 大型项目时所有数据都写在一个文件里代码量臃肿 不利于维护 所以可将其分成多个模块

state

Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

//count.vue
<template>
  <div>
    计数结果为{{count}}
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {};
  },
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
};
</script>

mapState

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性

创建vuex实例

let store = new Vuex.Store({
  state: {
    count: 0,
    age: 18,
    name: '孙悟空',
  },
})

使用

<template>
  <div>
    计数结果为{{count}} <br>
    年龄： {{age}}<br>
    {{name}}
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "Count",
  data() {
    return {
      str: "姓名：",
    };
  },
  computed: mapState({
    age: "age", //第一种写法
    count: (state) => state.count, //第二种
    name: function (state) {  //第三种 this指向vue实例
      return this.str + state.name;
    },
  }),
};
</script>

其中，第二种和第三种本质是一样的，只不过第二种使用了箭头函数 在使用中 要注意this的指向问题

…mapState

与局部计算属性混合使用

 computed: {
    ...mapState(["age", "count", "name"]),
    message() {
      return "组件自己定义的计算属性";
    },
  },

getter

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，mutation中的函数必须是同步的。

创建

//main.js
let store = new Vuex.Store({
  state: {
    count: 0,
    age: 18,
    name: '孙悟空',
  },
  mutations: {
    changeCount(state, payload) {
      let { n } = payload
      state.count += n
    }
  }
})

使用

  methods: {
    addCount() {
      this.$store.commit("changeCount", { n: 10 });
    },
    cutCount() {
      this.$store.commit("changeCount", { n: -10 });
    },
  },

使用常量替代 Mutation 事件类型

//main.js
import { CHANGECOUNT } from "./store/vuex"

  mutations: {
    [CHANGECOUNT](state, payload) {
      let { n } = payload
      state.count += n
    }
  }

//vuex.js
export const CHANGECOUNT = 'CHANGECOUNT'

//引入并使用
import { CHANGECOUNT } from "../store/vuex";

…mapMutations

<template>
  <div class="home">
    <Count />
    <button @click="CHANGECOUNT({n:5})">增加</button>
    <button @click="CHANGECOUNT({n:-5})">减少</button>
  </div>
</template>

<script>
import Count from "../components/Count";
import { CHANGECOUNT } from "../store/vuex";
import { mapMutations } from "vuex";

export default {
  name: "Home",
  components: { Count },
  data() {
    return {};
  },
  methods: {
    ...mapMutations([CHANGECOUNT]),
  },
};
</script>

action

action类似于mutation，提交的是mutation，action里可以包含异步操作。

//创建vuex实例
let store = new Vuex.Store({
  state: {
    count: 0,
    age: 18,
    name: '孙悟空',
  },
  mutations: {
    [CHANGECOUNT](state, payload) {
      let { n } = payload
      state.count += n
    }
  },
  actions: {
    increment({ commit }, payload) {
      setTimeout(() => {
        commit(CHANGECOUNT, payload)
      }, 2000)
    }
  }
})

使用

changeCount() {
      this.$store.dispatch("increment", { n: 4 });
    },