1、安装vuex
npm i vuex
2、在main.js里进入并且使用vuex
import Vuex from 'vuex'
Vue.use(Vuex)
3、在src文件目录下创建store目录,目录下创建store.js文件
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);export default new Vuex.Store({ state: { }, mutations: { }, getters:{ }, actions: {}})
4、需要在main.js配置
import store from './store/store'
new Vue({ store, render: h => h(App)}).$mount('#app');
5、接下来分析vuex中各项模块的功能
-
state
vuex中的数据源,我们需要保存的数据就保存在这里,可以在页面通过 this.$store.state来获取我们定义的数据;
store.jsexport default new Vuex.Store({ state: { count: 0, data:[], num:[1,2,4] },})
view.vue
<template> <p>{{count}}</p> <p>{{num}}</p> </template><script>import { mapState,mapGetters,mapMutations } from 'vuex'//这里是使用了辅助函数,分别对应state、getters、mutations.computed:{ ...mapState(['num']) , //...是es6的拓展符,这样可以直接访问到num. count(){ return this.$store.state.count //也可以用这种方法 },}</script>
-
mutations
如果需要修改state中的值唯一的方法就是提交mutation来修改.
store.jsexport default new Vuex.Store({ mutations: { increment: state => state.count++, decrement: state => state.count--, get: state => console.log(state.data), ff(state, b) { console.log(state.count+=b) } },})
view.vue
<template> <button @click="increment">+</button> <button @click="decrement">-</button> <button @click="get">get</button> <button @click="ff">+10</button> </template> <script> methods:{ increment(){this.$store.commit('increment')}, ff(){this.$store.commit('ff',10)},decrement(){this.$store.commit('decrement') }, get(){this.$store.commit('get')} } </script>
-
getters
就是从state中派生出状态,比如将state中的某个状态进行过滤然后获取新的状态
store.jsexport default new Vuex.Store({ getters:{filter(state) {const a=state.num.length; for (let i = 0; i < a; i++) { if (state.num[i] < 3) { console.log(state.num[i]) } }} },})
view.vue
<template> <p @click="getter">getters</p> </template> <script> methods:{ getter(){this.$store.getters.filter;}, } </script>
-
actions
actions就是mutation的加强版,它可以通过commit mutations中的方法来改变状态,最重要的是它可以进行异步操作。
store.jsexport default new Vuex.Store({ actions: { asyncInrement(context) { return new Promise(resolve => { setTimeout(() => { context.commit('increment'); resolve(); }, 1000) }); } } })
view.vue
<template> <button @click="action">+1</button> </template> <script> methods:{ action() { this.$store.dispatch('asyncInrement').then(() => { console.log(this.$store.state.count); })}, } </script>
6、module模块
项目比较复杂的时候,数据全部写在一个state ,将会使我们的文件显得太过于臃肿,而且不易维护,那怎么办呢?
vuex为我们提供了module这样一个模块的概念。
store.js
const moduleA = {
state: { /*data**/ },
mutations: { /**方法**/ },
actions: { /**方法**/ },
getters: { /**方法**/ }
}
const moduleB = {
state: { /*data**/ },
mutations: { /**方法**/ },
actions: { /**方法**/ }
getters: { /**方法**/ }
}
export default new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
//在模块内部使用
state.count //这种使用方式和单个使用方式样,直接使用就行
//在组件中使用
store.state.a.count //先找到模块的名字,再去调用属性
store.state.b.count //先找到模块的名字,再去调用属性
view.vue
<template>
<p @click="get"></p>
</template>
<script>
methods:{
get(){
this.$store.state.a.count
}
}
</script>