VueX 介绍

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

看图结论：

  • state 管理数据，管理的数据是响应式的，当数据改变时驱动视图更新。
  • mutations 更新数据，state 中的数据只能使用 mutations 去改变数据。
  • actions 请求数据，响应成功后把数据提交给 mutations

初始化功能

安装

1
npm i vuex --save

新建 store.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
// 初始化一个vuex的实例（数据仓库） 导出即可
import Vue from "vue";
import Vuex from "vuex";
// 使用安装
Vue.use(Vuex);
// 初始化
const store = new Vuex.Store({
  state: null,
  mutations: null,
  actions: null,
});
export default store;

在 main.js 配置

1
2
3
4
5
6
7
...
import store from '@/store'

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

state (管理数据)

普通写法

在store.js文件下写入

1
2
3
4
5
6
const store = new Vuex.Store({
  state: {
    // 管理数据
    count: 0,
  },
});

在组件获取state的数据：原始用法插值表达式

1
<p>{{ $store.state.count }}</p>

计算属性写法

1
<p>{{ count }}</p>

常规写法

正常写法

1
2
3
4
5
6
7
8
export default {
  ...
  computed: {
    count: function() {
      return this.$store.state.count;
    }
  }
};

缩写

1
2
3
4
5
6
7
8
export default {
  ...
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};

不能使用箭头函数 this指向的不是vue实例

  ### mapState

导入

1
import { mapState } from "vuex";

使用：mapState(对象)

基本写法

1
2
3
4
5
computed: mapState({
  count: function(state) {
    return state.count;
  },
});

箭头函数写法

1
2
3
computed: mapState({
  count: (state) => state.count,
});

vuex 提供写法

1
2
3
computed: mapState({
  count: "count",
});

当你的计算属性,需要依赖 vuex 中的数据,同时,依赖组件中 data 的数据

1
2
3
4
5
computed: mapState({
  myCount(state) {
    return state.count + 233;
  },
});

使用：mapState(数组)

1
computed: mapState(["count"]);

如果组件自己有计算属性，state 的字段映射成计算属性

1
2
3
4
5
6
computed: {
  myCount() {
    return 1;
  },
  ...mapState(["count"])
}

mutations (修改数据)

常规写法

在store.js文件下写入

1
2
3
4
5
6
7
8
9
10
const store = new Vuex.Store({
  ...
  mutations: {
    //state:state中的值
    //payload:传入的值
    increment(state, payload) {
      state.count = state.count + payload.num;
    }
  }
});

在要使用的组件文件下写入

1
2
3
4
5
6
7
methods: {
  fn() {
    //第一项 函数名
    //第二项 传入的参数
    this.$store.commit("increment", { num: 22 });
  }
}

mapMutations

在要使用的组件文件下写入

函数要传的参数在调用处的括号里传入

1
<button @click="increment({num:123})">点我</button>
1
2
3
methods: {
  ...mapMutations(["increment"])
}

actions (异步获取数据)

常规写法

在store.js文件下写入

1
2
3
4
5
6
7
8
9
actions: {
  getData({ commit }, num) {
    //模拟拿到后端数据
    window.setTimeout(() => {
      const data = num;
      commit("add", data);
    }, 2000);
  }
}

在要使用的组件文件下写入

1
2
3
getData() {
  this.$store.dispatch("getData", 10086);
}

mapActions

在要使用的组件文件下写入

函数要传的参数在调用处的括号里传入

1
<button @click="getData(123)">点我</button>
1
2
3
methods: {
  ...mapActions(["getData"])
}

modules

在 store 全局数据 是可以分模块化管理的

1
2
3
4
5
6
7
8
modules:{
    m1:{
        namespaced:true, // 开启命名空间
            state:{
                count:1
            }
    }
}
1
<h2>{{$store.state.m1.count}}</h2>