微信如何制作网页/seo网站有优化培训班吗

一、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')