一、安装、使用 vuex
- vue.js 2.0 开发环境中安装 vuex
npm install vuex --save
-
创建 store 文件夹和 index.js 文件
vuex 目录结构
// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
// store/index.js
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
export default new vuex.Store({
// 负责存储状态
state: {
},
// getters 和 vue 中的 computed 类似 , 用来计算 state 然后生成新的数据 ( 状态 )
getters: {
},
// 负责同步更新状态
mutations: {
},
// 负责获取,处理数据（如果有异步操作必须在 action 处理，再 mutation）
actions: {
},
// 分模块管理全局数据
modules: {
}
})
二、state
-
state存储状态
// store/index.js
state: {
num: 1
}
// App.vue
<h1>{{$store.state.num}}</h1>
-
mapState辅助函数，当一个组件需要获取多个状态的时候，为了减少状态声明为计算属性会的重复和冗余
// store/index.js
state: {
num: 1,
name: 'zs'
},
// App.vue
// html
<h1>{{num}}</h1>
<h1>{{name}}</h1>
// js
import { mapState } from 'vuex'
computed: mapState([
// 映射 this.num 为 store.state.num
'num', 'name'
]),
二、getters
- 计算
state然后生成新的数据 ( 状态 ) ，同时也会修改 state 的值
// store/index.js
state: {
num: 1
},
getters: {
newNum(state) {
return state.num = 100;
}
}
// App.vue
<h1>{{ $store.state.num }}</h1>
<h1>{{ $store.getters.newNum }}</h1>
-
mapGetters辅助函数，作用类似mapState
// store/index.js
state: {
num: 1,
name: 'zs'
},
getters: {
newNum(state) {
return state.num = 100;
},
newName(state) {
return state.name = 'ls';
}
},
// App.vue
// html
<h1>{{ newNum }}</h1>
<h1>{{ newName }}</h1>
// js
import { mapGetters } from 'vuex'
computed: mapGetters([
// 映射 this.newNum 为 store.getters.newNum
'newNum', 'newName'
]),
四、mutations
-
mutations同步更新状态，同步事务 -
mutations优先于getters执行
// store/index.js
state: {
num: 1
},
mutations: {
changeNum(state, n) {
state.num += n
}
}
// App.vue
// html
<h1>{{$store.state.num}}</h1>
// js
created() {
this.changeNum()
},
methods: {
changeNum() {
this.$store.commit('changeNum', 10)
}
}
-
mapMutations映射this.$store.commit
// store/index.js
state: {
num: 1,
},
mutations: {
changeNum(state) {
state.num++
}
}
// App.vue
// html
<h1>{{$store.state.num}}</h1>
// js
import { mapMutations } from 'vuex'
created() {
this.changeNum()
},
methods: {
...mapMutations([
'changeNum' // 将 this.changNum() 映射为 this.$store.commit('changNum')
])
}
五、actions
-
actions获取、处理数据，通过mutations变更状态 - 可以包含任意异步操作
// store/index.js
state: {
num: 1,
},
mutations: {
changeNum(state,n) {
state.num+=n
}
},
actions: {
changeNumActions(context) {
setTimeout(() => {
context.commit('changeNum',n)
}, 1000)
}
}
// App.vue
// html
<h1>{{$store.state.num}}</h1>
// js
created() {
this.changeNumActions()
},
methods: {
changeNumActions() {
this.$store.dispatch('changeNumActions',10)
}
}
-
mapActions映射this.$store.dispatch
// store/index.js
state: {
num: 1,
},
mutations: {
changeNum(state) {
state.num++
}
},
actions: {
changeNumActions(context) {
setTimeout(() => {
context.commit('changeNum')
}, 1000)
}
}
// App.vue
// html
<h1>{{$store.state.num}}</h1>
// js
import { mapActions } from 'vuex'
created() {
this.changeNumActions()
},
methods: {
...mapActions([
'changeNumActions' // 将 this.changeNumActions() 映射为 this.$store.dispatch('changNum')
])
}
六、modules
- 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
- 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
// store/modules/index.js
import Vue from 'vue'
import vuex from 'vuex'
import moduleA from './modules/moduleA'
Vue.use(vuex);
export default new vuex.Store({
// 分模块管理全局数据
modules: {
moduleA
}
})
// store/modules/moduleA.js
const moduleA = {
namespaced: true, // 开启命名空间，避免冲突
state: {
num: 999
},
mutations: {
changeNum(state) {
state.num++
}
}
}
export default moduleA
// App.vue
// html
<h1>{{$store.state.moduleA.num}}</h1>
// js
created() {
this.changeNum()
},
methods: {
changeNum() {
this.$store.commit('moduleA/changeNum', 10)
}
}
}
Xuex 和 localstorage 的区别
-
vuex
- 储存在内存中（读取内存比本地要快）
- 用于组件之间传值
- 临时储存，页面刷新后数据丢失
-
localstorage
- 储存在本地
- 用于页面之间传值
- 永久储存，除非手动清除
