简单应用"/>
Vuex 的简单应用
Vuex 的简单应用
文章目录
- Vuex 的简单应用
- 1、Vuex 是什么?
- 2、Vuex 的固定格式
- 3、Vuex 的简单应用
- 3.1、Vuex 的简单应用
- 3.1.1、思路
- 3.1.2、main.js 里引入
- 3.1.3、组件代码
- 3.1.4、store.js内容
- 3.2、Vuex 在真实项目中的使用
- 3.2.1、文件目录格式
- 3.2.2、main.js 里引入
- 3.2.3、组件代码
- 3.2.4、store文件里对应模块详情
- (1) index.js
- (2) state.js
- (3) mutations.js
- (4)actions.js
- (5) mutations_type.js
- (6) getters.js
- 4、最后附上一张vue和vuex的关系图
- 5、[致谢](/)
1、Vuex 是什么?
Vuex 是一个专为 Vue 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
2、Vuex 的固定格式
通过npm安装Vuex :npm install vuex
import Vue from "vue"
import Vuex from "vuex"Vue.use(Vuex)const state = {},
const mutations = {},
const actions = {},
const getters = {},export default new Vuex.Store({state, //状态对象mutations,//包含多个更新state函数的对象actions, //包含多个对应事件回调函数的对象getters //包含多个getter计算属性函数的对象
})
3、Vuex 的简单应用
3.1、Vuex 的简单应用
3.1.1、思路
安装vue,在src根目录下新建stroe.js文件,将vuex的内容都写在里边。
3.1.2、main.js 里引入
import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store"Vue.config.productionTip = falsenew Vue({el: '#app',router,components: { App },template: '<App/>',store //把 store 的实例注入所有的子组件,且子组件能通过 this.$store 访问到.
})
3.1.3、组件代码
<template><div class="test_box"><p>数值: {{$store.state.count}} ,奇偶性:{{evenOrAdd}} </p><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementIfAdd">偶数加</button><button @click="incrementIfReduce">奇数加</button><button title="异步:延时2s后执行" @click="incrementAsync">异步</button></div>
</template><script>import {mapState,mapActions,mapGetters} from "vuex"export default {name: "testVuex",computed:{...mapState(['count']),//返回值:{count(){return this.$store.state['count']}}...mapGetters(['evenOrAdd']), //返回值:{evenOrAdd(){return this.$store.getters['evenOrAdd']}}},methods:{...mapActions(['increment','decrement','incrementIfAdd','incrementIfReduce','incrementAsync']),},}
</script><style scoped lang="stylus">.test_boxmax-width 300pxmargin 100px autoline-height 40pxtext-align centerbuttonpadding 5px 10pxcursor pointer
</style>
3.1.4、store.js内容
/** Vuex 核心管理对象模块*/
import Vue from "vue"
import Vuex from "vuex"//声明 使用 安装
Vue.use(Vuex)// 状态对象
const state = {//初始化状态count : 0,
};
//包含多个更新state函数的对象
const mutations = {// 增加mutationsadd(state){state.count++},//减少mutationsreduce(state){if(state.count > 1){state.count--}else {state.count = 0;}},add_even(state){state.count = state.count + 2;},add_uneven(state){state.count = state.count + 3;}
};
//包含多个对应事件的回调函数的对象
const actions = {//增加increment({commit}){//提交增加的mutationscommit('add');},//减少decrement({commit}){//提交减少的mutationscommit('reduce');},//带条件的增加incrementIfAdd({commit}){//提交增加的mutationsif(state.count %2 ===0){commit('add_even');}},//带条件的减少incrementIfReduce({commit}){//提交减少的mutationsif(state.count %2 === 1){commit('add_uneven');}},incrementAsync({commit}){// 在action中直接就可以执行异步操作setTimeout(()=>{//提交增加的mutationscommit('add');},2000)}
};
//包含多个get特然计算属性函数的对象
const getters = {evenOrAdd(state){return state.count % 2 ===0 ? '偶数' : '奇数'}
};export default new Vuex.Store({ //Store 此处首字母大写state, //状态对象mutations,//包含多个更新state函数的对象actions, //包含多个对应事件回调函数的对象getters //包含多个getter计算属性函数的对象
})
3.2、Vuex 在真实项目中的使用
为了更好、更简单、模块化的使用,vuex的四个状态管理应该写开,有利于代码的管理,不然如果按照上面的stroe.js里的写法,会导致这个文件可能会变得很大。
3.2.1、文件目录格式
index.js
是入口文件。
mutations_type.js
是所有mutations的常量名称,目的是用来和actions里的方法名相同。
3.2.2、main.js 里引入
import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store/index" Vue.config.productionTip = falsenew Vue({el: '#app',router,components: { App },template: '<App/>',store //把 store 的实例注入所有的子组件,且子组件能通过 this.$store 访问到.
})
3.2.3、组件代码
<template><div class="test_box"><p>数值: {{$store.state.count}} ,奇偶性:{{evenOrAdd}} </p><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementIfAdd">偶数加</button><button @click="incrementIfReduce">奇数加</button><button title="异步:延时2s后执行" @click="incrementAsync">异步</button></div>
</template><script>import {mapState,mapActions,mapGetters} from "vuex"export default {name: "testVuex",computed:{...mapState(['count']),//返回值:{count(){return this.$store.state['count']}}...mapGetters(['evenOrAdd']), //返回值:{evenOrAdd(){return this.$store.getters['evenOrAdd']}}},methods:{...mapActions(['increment','decrement','incrementIfAdd','incrementIfReduce','incrementAsync']),},}
</script><style scoped lang="stylus">.test_boxmax-width 300pxmargin 100px autoline-height 40pxtext-align centerbuttonpadding 5px 10pxcursor pointer
</style>
3.2.4、store文件里对应模块详情
(1) index.js
/** vuex 入口文件*/import Vue from "vue"
import Vuex from "vuex"
import state from "./state"
import mutations from "./mutations"
import actions from "./actions"
import getters from "./getters"Vue.use(Vuex)export default new Vuex.Store({state,mutations,actions,getters
})
(2) state.js
/** 状态管理*/
export default {count:0,
}
(3) mutations.js
/** 包含多个actions触发去直接更新状态的方法的对象*/
//引入常量模块
import {ADD,REDUCE,ADD_EVEN,ADD_UNEVEN} from "./mutations_type";export default {ADD(state){state.count++},//减少mutationsREDUCE(state){if(state.count > 1){state.count--}else {state.count = 0;}},ADD_EVEN(state){state.count = state.count + 2;},ADD_UNEVEN(state){state.count = state.count + 3;}
}
(4)actions.js
import state from "./state"
//引入常量模块
import {ADD,REDUCE,ADD_EVEN,ADD_UNEVEN} from "./mutations_type"
export default {//增加increment({commit}){//提交增加的mutationscommit('ADD');},//减少decrement({commit}){//提交减少的mutationscommit('REDUCE');},//带条件的增加incrementIfAdd({commit}){//提交增加的mutationsif(state.count % 2 ===0){commit('ADD_EVEN');}},//带条件的减少incrementIfReduce({commit}){//提交减少的mutationsif(state.count % 2 === 1){commit('ADD_UNEVEN');}},incrementAsync({commit}){// 在action中直接就可以执行异步操作setTimeout(()=>{//提交增加的mutationscommit('ADD');},2000)}
}
(5) mutations_type.js
/** 所有mutations的常量名称,用来和actions里的相同*/export const ADD = 'add' ;//增加
export const REDUCE = 'reduce' ;//减少
export const ADD_EVEN = 'add_even' ;//偶数---增加
export const ADD_UNEVEN = 'add_uneven' ;//技术---增加
(6) getters.js
export default {evenOrAdd(state){return state.count % 2 ===0 ? '偶数' : '奇数'}
}
4、最后附上一张vue和vuex的关系图
图文解释,参考资料
5、致谢
更多推荐
Vuex 的简单应用
发布评论