vue.js学习笔记（四） 使用vuex

一、Vuex的安装：

cnpm install vuex --save-dev

二、Vuex的对象组成

vuex是采用vue.js进行单页面开发应用的统一状态管理插件，他提供了四类对象：

state：需要在页面组件中访问的状态对象，可包好多个状态变量；

getter：类似vue.js的计算属性（computed），是对state变量的二次封装，实现变量数据的过滤或者简单变形和计算；

mutations：页面组件不能直接更改state对象中的变量值，mutations对象实现方法封装，完成对state对象的属性更改操作，但只支持同步更改；mutaiotns代码示例：

import AxiosApplication from '@/api/axios.js'
import state from "./state.js"


var axios=new AxiosApplication();
var mutations={
  //==============注意mutations中的方法第一个参数必须是state，只是传参数的时候传一个参数就可以了=======
  setUserId(state,userId)
  {

    state.userId=userId;
    console.log(state);
  },
  setUserName(state,userName)
  {
    state.userName=userName;
    console.log(state);
  },
  setToken(state,token)
  {
    state.token=token;
    console.log(state);
  },
  setDepartId(state,departId)
  {
    state.departId=departId;
    console.log(state);
  },
  setDepartName(state,departName)
  {
    state.departId=departName;
    console.log(state);
  },
  setRoleId(state,roleId)
  {
    state.roleId=roleId;
    console.log(state);
  },
  setState(state,userInfo)
  {
    state.userId=userInfo.userId;
    state.userName=userInfo.userName;
    state.token=userInfo.token;
  }

}

export default mutations;

注意：需要将state作为方法的第一个参数；

actions：使用commit方法，通过mutations的方法名称实现对mutations方法的调用，支持异步调用

module：针对模块实现的Vuex，包含了state、getter、mutations、actions对象；

三、Vuex的使用

一般在src目录下新建store目录，在目录下分别新建state.js文件在该文件中定义state属性变量，新建getter.js文件定义针对state变量的属性方法；新建mutations.js文件，定义更改state属性变量的方法；新建actions.js文件，实现对基本方法以及mutations方法的调用；新建index.js文件，在该文件中将state、getter、mutations、actions组合为Vuex的store对象，代码示例如下：

import Vuex from "vuex"
import  Vue from "vue"
import state from "./state.js"
import mutations from "./mutations.js"
import actions from "./actions.js"
Vue.use(Vuex);
var store=new Vuex.Store({
state,
  actions,
  mutations

})
export default store;

系统如果特别复杂，可以进行模块化分割，新建module目录，将模块中的状态对象及其访问分别定义为相应对象文件，然后在Vuex中通过moudle引入，示例代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'
import user from './module/user'
import album from './module/album'
import albumCategory from './module/albumCategory'
import albumTrack from './module/albumTrack'
import upload from './module/upload'
import ad from './module/ad'
import app from './module/app'
Vue.use(Vuex)

export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters,
  modules: {
    user,
    album,
    albumCategory,
    albumTrack,
    upload,
    ad,
    app
  }
})

四、将状态对象引入到Vue组件中

Vuex 提供了mapActions、mapMutations、mapState、mapGetter方法，实现Vuex中各类Actions、Mutations在组件中的映射，完成隐射后方法或对象即 定义为组件自身的方法或对象,示例代码：

import menu from '@/components/menu'
import navitem from '@/components/navitem'
import  {nmenu} from '@/data/basedata.js';
import AxiosApplication from '@/api/axios.js'
import { mapActions } from 'vuex'
debugger
var nmenuData=nmenu;
export default {
  name: 'App',
  data:function(){
    return {
      navMenu:nmenuData,
      dcomponent:'w_item',
      response:{}
    }
  },
  methods:{
    ...mapActions([
      'registerLogin'
    ]),
    chgComponent:function(params)
    {
      switch (params.subTitle[0].id)
      {
        case 1:
          this.$router.push({path:'/draw'});
          break;
        case 4:
          this.$router.push({path:'/list'})
          break;
        case 7:
              this.registerLogin({userid:"test",password:"123456"});
        default:
          this.$router.push({path:'/'})
          break;
      }
    }

}

在组件代码中通过this+actions的方法名称即可实现Vuex状态对象的方法引用；

五、在组件中访问Vuex状态对象

在vue.js项目中的main.js文件中将使用store，即可在组件中通过this.$store.state.属性名称的方式获取属性变量的值。

main.js代码示例：

import store from './store'
var app=new Vue({
  el: '#app',
  store,
  router,
  data:{
    shareState:{
      state:1
    }
  },
  components: { App },
  template: '<App/>',  
})

组件中状态对象访问示例：

this.$store.state.userId

组件中访问actions方法

his.$store.dispatch('hideFooter')