VueX 是什么

VueX 是什么

·
1. 概念:
1. VueX 是 Vue配套的公共数据管理工具，他可以把一些共享的数据保存到VueX中，方便整个程序中的任何组件直接获取或修改我们得公共数据
2. Vuex 是为了保存组件之间的共享数据而诞生的，如果组件之间有 需要共享的数据， 可以直接挂载到Vuex 中， 而 不用通过父子组件之间的传值， 如果 组件的数据 不需要共享，就没必要 挂载到 Vuex中去
3. Vuex 是一个全局的共享数据的储存区域， 就相当于数据的仓库

Vuex 怎么使用

1. 使用 npm i vuex --save 安装到项目中

2. 在一个 模块化打包系统中， 通过Vue.use() 来安装Vuex

​	import Vue from ’‘vue’‘

​	import Vuex from  ’‘vuex’‘

Vue.use（Vuex）

3. 安装过后 ， 创建一个store

// 配置 vuex的步骤
//1. 安包 npm  i vuex -S
//2. 导入包
 import Vuex from 'vuex'
//3. 注册 vuex到 vue项目中
Vue.use(Vuex)
//4. new Vuex.Store()实例 得到一个 数据仓储数据对象
var store = new Vuex.Store({
    state:{
        //用来存储数据
    },
    mutations:{
        // 注意： 如果要操作store 中的 state值， 只能通过调用mutations 提供的方法 才能操作对应的数据，不能在组件中直接操作 state中的数据 因为 万一导致了数据的紊乱， 不能快速定位到错误的原因，因为 每个组件都有可能操作数据的方法 
        increment(state){
            state.count++
        },
        //注意： 如果组件想要调用 mutations 中的方法，只能使用 this.$store.commit('方法名')
        subtract(state,c){
            // 注意： mutations 的 函数参数列表在中最多支持两个参数，
            //参数1 是state状态；
            //参数2 通过commit 提交过来的参数
            state.count -= c
        }
    },
    getters:{
        //注意： 这里的getters ， 只负责对外提供数据，不负责修改数据，做修改操作 去找mutations 
		optCount:function(state){
			return '当前的最新的count值是' + state.count
        }
    }
})
//5. 将vuex创建的store 挂载到VM 实例上 只要挂载到VM上  任何组件都能使用 store来存取数据

// 在组件中 使用 vuex中的数据 只能通过 this.$store.state.属性 来调用数据