vuex差不多

VueX

**一：state**：
		保存变量值的地方，在页面内访问<p >{{$store.state.num}}</p>,在new Vue()内访问需要加this因为this指向new Vue实列this.$store.state.num
		可以在computed中写

	computed:{
		num(){
			return this.$store.state.num
		}
	}

*二：getters：*
	相当于计算器属性，VueX写法,自带一个参数接到state的值，要访问就用<p >{{$store.getters.getNum}}</p>或者new Vue内this.	$store.getters.getNum	

	getters:{
	getNum(state){
		return state.num
	}
}

三：mutations:
	修改VueX状态的唯一方法就是mutations,自带一个参数state可以传参，多个参数使用对象风格传参，在VueX写法:

	mutations:{
		setNum(state,add){
			state.num = state.num+add
		}
	}

其他组件想要改变state变量的值就必须调用mutations的方法:

	this.$store.commit('setNum',2)

四:actions:
处理异步任务使用，还是需要调用mutations:

actions:{
    setNum(content,payload){  
      return new Promise((resolve)=>{
        setTimeout(()=>{
          console.log('测试载荷---'+payload.num); 
          content.commit('setNum',payload.num)
          resolve()
        },1000)
      })
   }
  }

 this.$store.dispatch('setNum',{num:111}) 组件内调用

五:辅助函数，先import引入mapState, mapMutations, mapActions, mapGetters，然后在计算属性中解构和methods中解构

// App.vue
<template>
  <div>
    <h1 @click='login'>{{number1}}</h1>
    <h1>{{number2}}</h1>
  </div>
</template>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default{
	computed:{
		...mapState(['num','name']) // 在组件通过this就可调用，不用再写this.$store.state
		// ...mapState({ 另一种写法
    	//   number1: state=>state.number1,
    	//   number2: state=>state.number2
    	// }),
    	...mapGetters(['getNum']),
	}，
	methods:{
		 ...mapMutations(['setNum','changeNumber2']),
		 //要使用就this.setNum就可以了
		 login(){
			this.setNum(2)
		}
    // 定义别名方式
    // ...mapMutations({
    //   changeNumber1Alias: 'changeNumber1',
    //   changeNumber2Alias: 'changeNumber2'
    // }),
    ...mapActions(['setNum','changeNumber2Action']),
    // 定义别名方式
    // ...mapActions({
    //   changeNumber1ActionAlias: 'changeNumber1Action',
    //   changeNumber2ActionAlias: 'changeNumber2Action'
    // }),
	}

六.拆分写法模块化
在store目录下准备state.js，getters.js，mutations.js，actions.js，在每个文件中写代码然后导出，index.js导入就可以了

export default{
	//这里就写state，mutations这些该写的代码,比如state就是这样
	num:0
}

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import  state  from './states';
import  getters  from './getters';
import  mutations  from './mutations';
import  actions  from './actions';

Vue.use(Vuex)

export const store = new Vuex.Store({
		namespaced:true, //命名空间
        state,
        getters,
        mutations,
        actions,
    })

七.modules
我们假设有用户和购物车两个组件需要使用vueX，把他们分细一点首先在store目录下创建一个user目录和cart目录分别在里面写state.js，getters.js，mutations.js，actions.js，index.js

export default{
	//这里就写state，mutations这些该写的代码,比如state就是这样，除了index.js外的东西
	username:'jojo',
	pass:'111111'
}

index.js

import  state  from './states';
import  getters  from './getters';
import  mutations  from './mutations';
import  actions  from './actions';

export default{
        state,
        getters,
        mutations,
        actions,
    )

store目录下的index.js

	import Vue from 'vue';
import Vuex from 'vuex';
import  state  from './states';
import  getters  from './getters';
import  mutations  from './mutations';
import  actions  from './actions';
import  users from './users/index';

Vue.use(Vuex)

export const store = new Vuex.Store({
        state,
        getters,
        mutations,
        actions,
        modules:{
			users
		}
    })

组件中要使用这些应该

// App.vue
<template>
  <div>
    <h1>{{$store.state.user.username}}</h1>
    <h1>{{number2}}</h1>
  </div>
</template>
import {  mapMutations, mapActions,} from 'vuex'
export default{
	methods:{
		 ...mapMutations({
			'changeUserName':'users/changeUserName' //changeUserName是user目录下面mutations中的一个方法
		}),
	}