vuex学习汇总

一、vue概述及核心属性
vue是一个为vue.js开发的状态管理模式，包含State,utations,ctions,etters,Modules几个核心属性
在项目中可以创建一个单独的store.js文件，将store中的内容模块化

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user,
  },
  getters,
})

export default store

二、State
State属性相当于vue实例中的data，在vuex中起到存放数据的作用。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
  property:Number=1
}
})
export default store

在项目中调用可以

<template>
  <div>
    {{property}}
  </div>
</template>
<script>
//引入vuex的方法
import {mapState} from "vuex";
export default {
data(){
  return{}
},
computed:{
  ...mapState(['property'])//按需调用state的属性
}
}
</script>

二、Mutations
mutations相当于修改state数据的一个方式，但不支持异步操作

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
  property:Number=1
},
mutations:{
CHANGE:( state , step)=>{
    state.property=step
  }
}
})
export default store

在组件中使用

<template>
  <div @click="change()">
    {{property}}
  </div>
</template>
<script>
//引入vuex的方法
import {mapState,mapMutations} from "vuex";
export default {
data(){
  return{}
},
computed:{
  ...mapState(['property'])//按需调用state的属性
},
methods:{
...mapMutations(['CHANGE']),
change(){
  this.CHANGE(2)
}}}
</script>

三、Actions
actions可以通过mutations完成对state数据的异步操作

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
  property:Number=1
},
mutations:{
CHANGE:( state , step)=>{
    state.property=step
  }
},
actions:{
  CHANGE_ASYNC:(context,step)=>{
    setTimeout(()=>{
      context.commit('CHANGE',step)
    },6000) 
  }}
})
export default store

组件中使用

<template>
  <div @click="CHANGE(2)">
    {{property}}
    <button @click="CHANGE_ASYNC(5)">延迟变成5</button>
  </div>

</template>
<script>
//引入vuex的方法
import {mapState,mapMutations,mapActions} from "vuex";
export default {
data(){
  return{}
},
computed:{
  ...mapState(['property'])//按需调用state的属性
},
methods:{
...mapMutations(['CHANGE']),
...mapActions(['CHANGE_ASYNC']),

}
}
</script>

四、Getters
getters相当于store的计算属性，可以过滤掉state的内容，支持方法访问和属性访问

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
export default new Vuex.Store({
	//创建一个对象来保存应用启动时的初始状态
	state:{
		 // 应用启动时， count置为0
		count:0,
		todos: [
			{ id: 1, text: '水果类', done: true },
			{ id: 2, text: '苹果', done: true },
			{ id: 3, text: '苹果', done: false}
	    ]
	},
	getters: {
		doneTodos: state => {//通过方法访问
		  return state.todos.filter(todo => todo.done)
		},
		doneTodosCount: (state, getters) => {//通过属性访问
    		return getters.doneTodos.length
  		}
	}
})

使用时

<template>
    <div>
        <h4>测试1：Count is {{count}}</h4>
        <P>通过属性访问：{{doneTodosCount}}</p>
        <P>通过方法访问：{{doneTodos}}</p>
    </div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
	computed:{
		count(){
		    return this.$store.state.count
		},
		...mapGetters([
			'doneTodos',
			'doneTodosCount'
		])
	}
}
</script>

五、Modules
可以使用modules将store分割为模块，避免store存在一个页面上过于繁杂

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import common from './modules/common'
import tags from './modules/tags'
import logs from './modules/logs'
import dict from './modules/dict'
import getters from './getters'

Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user,
    common,
    logs,
    tags,
    dict
  },
  getters,
})

export default store

同时在模块内部同样可以嵌套子模块