vue中vuex的使用

什么是vuex?

概念：vuex是vue中的一个状态管理插件(在页面中，不管是页面级组件还是功能组件都可以获取到其中的数据)

为什么会要用到vuex这样一个插件？

因为页面之间的组件之间的传值复杂的问题

如何安装及使用

安装

npm install vuex --save  或 npm install vuex@版本号（根据自己需要的版本写入版本号）

使用

在vue项目的src目录下创建一个store文件夹在文件夹下创建一个index.js文件

在index.js文件中创建仓库

1.引入

创建仓库首先要引入vue 和vuex

import Vue from 'vue'
import Vuex from 'vuex'

2.注册vuex

Vue.use(vuex)

3.创建仓库

​
let store = new Vuex.Store({
    //注意这个对象的核心属性（4个）核心模块的属性
    state   getter   mutations   actions
    //属性一：state相当于vue中的data
        data的特性:响应式 所以state也具有这一特性
        //响应式：当在data或state中的数据发生改变时，页面视图也随之发生改变
    //属性二：getters相当于vue中的computed属性（state中的数据不是我们想要展示的数据-->对数据在进行处理）  在.vue文件中使用通过this.$store.getters.定义方法的名称去获取数据  也可以使用辅助函数MapGetters获取数据  具有缓存机制
    //属性三:mutations 用来修改state中的数据   注意:只能使用同步的写法
      相当于vue中的metheds一样
    //属性四：actions 用来处理异步  返回的是mutations并不是具体的值
        state:{
		    age:20
        }，
        getters:{
			//用法:
    		//在getters对象中定义一个方法
    		//这个方法传的第一个参数必须是state
            Myage(state){
			  return state.age+4  （计算的值可以是传的参）
             }
        },
         mutations:{
             changeAge(state){
    			//第一个参数就是state(仓库的数据)，第二个参数就是使用时候的形参
			}          
         }，
        actions:{
             actions中定义的方法要和mutations中定义的方法同名
             这个方法的第一个参数是store对象
             changeAge(store){
                settimeout(()=>{
                    
                },2000)
            }
        }
})

​

4.将store暴露出去--->添加根实例中做一个属性

export dafault 'store'

在根组件（src目录下的main.js）中引入

import store from './store'

随后在根组件的Vue实例中添加store属性

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

添加的作用：我们可以在所有的.vue文件中通过this.$store获取到仓库中的数据

总结创建仓库的步骤：引入vue vuex-->注册vuex-->创建仓库-->暴露store-->引入store-->添加store属性