Vuex 的简单应用

简单应用"/>

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、致谢