Vuex 学习与简单使用

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

主要用来管理某种状态（包括更改某个状态状态）,对于多层嵌套路由间的传参特别有效

此处以分割各个部分来记录，以便后续参照使用

在src 文件夹中新建store文件夹

store文件夹里分别新建以下文件：

    index.js:我们组装模块并导出 store 的地方
    state.js:状态变量
    getters.js:将state中的状态暴露出去，以便其他组件使用
    actions.js:异步方法
    mutations.js:更改状态的方法

types.js:记录自己的操作对应表（不是必须，只是为了方便后续查阅）

以官方的简单计数为例：

state.js 文件如下：

const state = {
  count:20
};
export default state;

getters.js 文件如下：

import state from "./state";
const getters = {
  count: state => {
    return state.count;
  }
};
export default getters;

types.js 文件如下：

export const INCREMENT = "increment";//作 + 运算

actions.js 文件如下：

import * as types from "./types";
const actions = {
  /*******
   * 带参数写法
  [types.INCREMENT]: ({ commit },params) => {
    commit(types.INCREMENT,params);
  }
   *********** */
  [types.INCREMENT]: ({ commit }) => {
    commit(types.INCREMENT);
  }
};
export default actions;

mutation.js 文件如下：

import * as types from "./types";
import state from "./state";
const mutations = {
  /********
   * 带参数
  [types.INCREMENT](state，params){
    state.count+=params;
  }
   * ************** */
  [types.INCREMENT](state){
    state.count++;
  }
};
export default mutations;

index.js 文件如下：

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import state from "./state";
import actions from "./actions";
import mutations from "./mutations";
import getters from "./getters";
const store = new Vuex.Store({
  state,
  actions,
  getters,
  mutations
});
export default store;

后续若要管理其他状态，通过某个方法更改状态，在对应的文件中，以类似的方式增加相应代码即可

在组建中使用：具体使用请查阅官方文档：点击打开链接此处记录个人认为最简单最后用的方法

首先在组件导入：mapGetters,mapActions，详细解释清参照官方文档：点击打开链接

import {mapGetters,mapActions} from "vuex"

在computed中：

computed:{
    ...mapGetters(['count'])
  },

在methods中：

methods{
    ...mapActions(['increment'])
  },

可以直接在模板中使用：

<p>{{count}}</p>
<button @click="increment">自增</button>

也可以在mounted中通过dispatch调用action：

mounted(){
   this.$store.dispatch("increment");
  },

注意：
使用前要进行安装，安装方法为：cnpm install vuex -D

在main.js 要导入store并在VUE实例中进行使用

import store from "./store";
new Vue({
  el: "#app",
  router,
  store,
  render: h => h(App)
});

Vuex 学习与简单使用

猜你喜欢