vue.js中vuex的详解配置及模块化使用

在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用:
首先要安装、使用 vuex
首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :

npm install vuex --save

然后 在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里面的内容如下:

在store文件夹里面的index.js文件里面的内容如下

import Vue from 'vue';
 import Vuex from 'vuex';
 import getters from './getters'

 Vue.use(Vuex);


 // https://webpack.js.org/guides/dependency-management/#requirecontext
 const modulesFiles = require.context('./modules', false, /\.js$/)

 // you do not need `import app from './modules/app'`
 // it will auto require all vuex module from modules file
 const modules = modulesFiles.keys().reduce((modules, modulePath) => {
   // set './app.js' => 'app'
   const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
   const value = modulesFiles(modulePath)
   modules[moduleName] = value.default
   return modules
 }, {})


 const store = new Vuex.Store({
   modules,
   getters
 });


 export default store;

在store文件夹里面的getters.js文件里面的内容如下

const getters = {
    //getters 文件为导出state里面的数据，导出格式state => state.Login.userCode ,
    //表示store/modules/Login/Login.js里面的state里的变量userCode
    //如果不是很懂，下面会介绍在state存数据
    // userCode : state => state.Login.userCode ,
  }
  export default getters

接下来，在 main.js里面引入store，然后再全局注入一下，这样一来就可以在任何一个组件里面使用this.$store了：

import store from './store'//引入store
 
new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
})

说了上面的前奏之后，接下来就是纳入正题了，就是开篇说的state的玩法。
state
在modules文件夹下新建登录模块的文件夹Login,然后在Login文件夹下新建Login.js文件，回到Login文件j夹的Login.js里面，我们先声明一个state变量，并赋值一个空对象给它，里面定义变量的初始属性值；
mutations
光有定义的state的初始值，不改变它不是我们想要的需求，接下来要说的就是mutations了，mutattions也是一个对象，这个对象里面可以放改变state的初始值的方法，具体的用法就是给里面的方法传入参数state或额外的参数,然后利用vue的双向数据驱动进行值的改变如下：
actions
vuex官方API还提供了一个actions，这个actions也是个对象变量，最大的作用就是里面的Action方法 可以包含任意异步操作，这里面的方法是用来异步触发mutations里面的方法，actions里面自定义的函数接收一个context参数和要变化的形参，context与store实例具有相同的方法和属性，所以它可以执行context.commit(’ '),然后也不要忘了把它也扔进里面：

const state={
    userCode:"",  //初始化一个userCode变量
};
// 赋值方法    
const mutations={

     userCodeChang: (state, device) => {//如何变化userCode,插入device
        state.userCode = device
      },
 };
 //调用方法
const actions={
    
    submitFormCode({ commit }, device) {//触发mutations里面的userCodeChang ,传入数据形参device 对应到device
        commit('userCodeChang', device)
      },
};
export default {
     namespaced:true,//用于在全局引用此文件里的方法时标识这一个的文件名
     state,
     mutations,
     actions
}

接下来咱们一起来看看 mapState,mapGetters,mapActions的使用，首先 在需要用的 组件里面先导入
import {mapState,mapGetters,mapActions} from ‘vuex’;
需要传值来实时变动state.userCode 里的数据，那肯定要在执行它的地方进行传值了，所以下面用到它的地方我们用了个@click来执行这个submitFormCode方法了，并且传入相应的对象数据device,如下：

			<el-button
              @click="submitFormCode(scope.row);"
              type="text"
              size="medium"
              title="编辑"
              v-if="scope.row.check != 2 && (scope.row.createUserCode == loginUseCode)"
            ></el-button>


			<script>
			import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
			
			data(){
				return{
				}
			}
			methods:{
				...mapActions("Login", [
			      //Login是指modules文件夹下的Login.js
			      "submitFormCode" //Login.js文件中的actions里的方法，在上面的@click中执行并传入实参
			    ]),
			}
			
			</script>

然后在需要取值的组件里面取值

<script>
		import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
		data(){
			return{
				dialogFormData:''
			}
		}
	 created() {
	    this.loginData();
	  },
	  computed: {
	    //vuex取值
	    ...mapGetters(["userCode"])
	  },
	methods: {
	    loginData() {
	      // console.log(this.editRow);打印并使用这个值
	      this.dialogFormData = this.editRow;
	
	      let loginUser = JSON.parse(localStorage.getItem("ms_loginUser"));
	      this.loginUseCode = loginUser.code;
	    },
</script>

至此，vuex中的常用的一些知识点使用算是简单的分享完了，当然了，相信这些只是一些皮毛！只能说是给予刚接触vuex的初学者一个参考与了解！有哪里不明白的或不对的，留言下，咱们可以一起讨论、共同学习！