Vuex总结篇-vue状态管理模式

1.简介

0.安装：npm install vuex --save;

1.状态管理模式：开发过程中监视变量数值变化的工具；

2.统一管理：它采用集中式存储管理应用的所有组件的状态；

3.store仓库：vuex的核心，就是一个放数据的容器；

3.响应式：状态变化会影响其使用的组件进行新的渲染和更新；

4.显式变更数据：不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation；

5.适用范围：中大型的页面开发，其中包括大量的数据通信；

6.非单纯的全局变量：存储是响应式的，不可以通过store.keyNum样式修改状态值；

2.示例

//定义一个store仓库：store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state={
    num: 0
}
const mutations={
    addNum(state) {
        return state.num++
    }
}
const getters={
    numAdd(){
        return state.num++
    }
}
const actions={
    guoAddNum(context){
        context.commit("addNum")
    }
}
export default new Vuex.Store({
    state,        //用于存储数据，类似vue实例的data属性
    actions,      //用于进行递交异步更改，通过调用mutations实现对数据的更改(推荐使用)
    mutations,    //用于递交更改，对state对象中的属性数据进行更改
    getters       //相当于computed计算属性，不可修改状态值
})




//主入口脚本文件：main.js
import Vue from './vue'
import store from './store'
Vue.config.productionTip=false

new Vue({
    el:"#app",
    store
})


//使用state的组件：demo.vue
<template>
    <div>
        <span> {{this.$store.state.num}} </span>        //使用state的值
        <span> {{this.$store.getters.numAdd}} </span>   //格式化state的值
        <button @click='toStoreAdd'> 加上1 </button>    //过渡区改变state中的值
    </div>
</template>
<script>
    export default{
        name:'demo',
        methods:{
            toStoreAdd(){
                this.$store.dispatch("guoAddNum")
            }
        }
        
    }
</script>

3.注意事项

1、actions是异步的和mutations是同步的，推荐使用actions来修改state中的值；

2、mutations属性函数只接受两个参数，第一个 state是必有的，第二个传递新参是可选的；

3、actions属性函数必须传递的第一个参数是context，用于触发mutations函数；

4、不可以在组件的data中定义state中的值，会导致混乱渲染。应该定义在computed中return回来就好；