手摸手教你在vue-cli里面使用vuex，以及vuex简介-阿里云开发者社区

手摸手教你在vue-cli里面使用vuex，以及vuex简介

2022-06-22 209

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 写在前面：这篇文章是在vue-cli里面使用vuex的一个极简demo，附带一些vuex的简单介绍。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。本文首发于我的个人blog：obkoro1.com引入步骤我创建了一个新的vue-cli里面什么东西都没有，只引用了vuex，这里是码云地址,可以下载下来，然后npm install、npm run dev试试看，里面vuex的使用地方也全都注释了一遍。安装 npm install vuex --save

写在前面：

这篇文章是在vue-cli里面使用vuex的一个极简demo，附带一些vuex的简单介绍。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。

引入步骤

我创建了一个新的vue-cli里面什么东西都没有，只引用了vuex，这里是码云地址,可以下载下来，然后npm install、npm run dev试试看，里面vuex的使用地方也全都注释了一遍。

安装

npm install vuex --save

在src目录下创建文件夹vuex

该文件夹包含以上文件，创建好了之后，我们一个一个文件来说里面都有什么东西。

vuex/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import status from './modules/status/index';//引进模块
Vue.use(Vuex);
export default new Vuex.Store({
  modules: {  
    //Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action
    dataStatus:status,//访问这里面数据的时候要使用'dataStatus'
  },
});

这是vuex的主文件store，这个例子是把state、mutation、action分割成模块，然后再将每个模块引用进这个index.js文件里面，等我们整个文件夹的文件都搭好之后，还要把文件引入到main.js里面、

vuex/modules/status/index.js

import actions from './actions';
import mutations from './mutations';
//引入action和mutations 
export default {  
  state:{ //这里面是要读取或者写入数据的地方
      msg:'默认状态',
  },
  //state actions mutations顺序不能乱
  actions: actions,
  mutations: mutations,
}

这是一个模块里面的主文件，模块内部拥有自己的state、actions、mutions，是从上到下进行分割的。

vuex/modules/status/mutation_type.js

//这个js文件里面只是一些变量，把action和mutation文件里面相同变量名的链接起来
export const VUEX_TEST = 'VUEX_TEST';
// 一般使用的是大写来命名变量，因为尤大也是这么做 2333

vuex/modules/status/actions.js

import * as types from './mutation_type'; //引入变量
export default {
  actionFn({commit},data){ //actionFn是在组件通过dispatch触发的函数名 可以理解成组件和actions的连接
    commit(types.VUEX_TEST,data);
    //types.VUEX_TEST 是要commit到mutation的哪个位置 变量的作用
    //data 是传过来的参数
  }
};

vuex/modules/status/mutations.js

import * as types from './mutation_type';//引入变量
export default {
  //types.VUEX_TEST 代表接受哪个actions的commit 也就是上面引入变量的作用
  [types.VUEX_TEST](state,data){ 
    //第一个参数state是这个模块的state 第二个参数是传进来的数据 
    if(data.status==1){ //根据传进来的参数做各种操作
      //这里就是操作state了，赋值之后，各个组件上面引用该数据的地方会自动更新      
      state.msg=data.text;
    }else if(data.status==2){
        state.msg='奕迅';
    }
    //这里是随便写的一个栗子
    console.log(state.mg,data,'mutation'); 
  }
};