当前位置 博文首页 > 超负荷小生的博客：Vuex-Store仓库的入门使用
state : vuex的基本数据，用来存储变量
getters : 从基本数据(state)派生的数据，相当于state的计算属性
mutations : 提交更新数据的方法，必须是同步的(如果需要异步使用actions)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。 回调函数就是在实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
actions : Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。
modules : 模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
创建一个vue项目，安装vue脚手架
npm install -g @vue/cli-init
vue create 项目名称
cd 文件夹 #进去create项目的所在文件夹，添加路由和vuex
vue add router #添加路由，多一个router.js文件
vue add vuex #安装vuex ,多一个store.js文件
在store.js中添加基本数据
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:1 // 添加基本数据
},
mutations: {
},
actions: {
}
})
在Home.vue页面上使用store中的基本数据
<template>
<div class="home">
<h1>{{ this.$store.state.count }}</h1>
</div>
</template>
<script>
export default {
name: 'home',
components: {}
}
</script>
页面效果
在home.vue中添加上增加和减少的方法，使用store中的mutations中的方法
<template>
<div class="home">
<h1>{{ this.$store.state.count}}</h1>
<h3>mutations模块</h3>
<button @click="addNum()">增加</button>
<button @click="subNum()">减少</button>
<h3>actions模块</h3>
<button @click="addCount()">add</button>
<button @click="subCount()">sub</button>
<br>
<h3>输入提交数据</h3>
<input v-model="num" />
<button @click="submitNum()">提交数据</button>
</div>
</template>
<script>
export default {
name: 'home',
data(){
return {
num: 0
}
},
components: {},
methods:{
addNum(){
this.$store.commit('addNumMutations'); //提交到mutations中的addNumMutations
},
subNum(){
this.$store.commit('subNumMutations'); //提交到mutations中的subNumMutations
},
addCount(){
this.$store.dispatch('addActions'); //以载荷方式分发，先到actions，在actions中调用mutations中的方法
},
subCount(){
this.$store.dispatch({type:'subActions'}); //以对象方式分发，先到actions，在actions中调用mutations中的方法
},
submitNum(){
this.$store.dispatch('submitNumActions',this.num); //调用时使用（方法名，值）的方法，异步使用actions
}
}
}
</script>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:1
},
mutations: {
addNumMutations(state){state.count++},
subNumMutations(state){state.count--},
submitNumMutations(state,res){state.count=res}
},
actions: {
addActions({commit}){commit('addNumMutations')},
subActions({commit}){commit('subNumMutations')},
submitNumActions({commit},res){
commit('submitNumMutations',res)}
}
})
dispatch：异步操作，写法： this.$store.dispatch('mutations方法名',值)
commit：同步操作，写法：this.$store.commit('mutations方法名',值)
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import cloneDeep from 'lodash/cloneDeep'
import common from './modules/common'
import user from './modules/user'
import dept from './modules/dept'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
common,
user,
dept
},
mutations: {
// 重置vuex本地储存状态
resetStore (state) {
Object.keys(state).forEach((key) => {
state[key] = cloneDeep(window.SITE_CONFIG['storeState'][key])
})
}
},
strict: process.env.NODE_ENV !== 'production'
})
modules中的文件统一结构如下
export default {
state:{},
mutatons:{},
actions:{},
getters:{}
}
例如user.js
export default {
namespaced: true,
state: {
id: 0,
name: ''
},
mutations: {
updateId (state, id) {
state.id = id
},
updateName (state, name) {
state.name = name
}
}
}
在vue页面设值和取值
设值
this.$store.commit('模块名/那个mutation',传入的值);
this.$store.commit('user/updateId ',this.userData);
取值
{{this.$store.state.模块.state中的属性}}
{{this.$store.state.user.name}}
