vue脚手架 vuex的搭建和使用

01 手动搭建vuex

        vuex叫做全局状态管理仓库

        vuex的搭建:

                1.下载vuex3.x版本  npm i  vuex@3.0.0 --save

                2. 在src/store下面创建index.js

                3.引入vue和vuex

                        import Vue from 'vue'

                        import Vuex from 'vuex'

                        Vue.use(Vuex)

                4.export default  new Vuex.Store({

                        五大属性 state mutations actions getters modules

                  })

                5.在main.js  import store from './store'

                6.注册到new.Vue里面去

02 vuex中的属性的使用

        vuex就是vue中的状态管理仓库  是整个vue项目都可以共享的一个仓库

        数据可以进行增删改查  任意页面都可以使用

        实现原理就是全局绑定仓库 并在vue里面注册 这样就是实现了共享数据  也实现了组件之间的数据传参

        vuex的缺点:

                1.比较笨重

                2.mutations 方法无法取得返回值

                3.mutations 方法里面不建议写异步代码 不然容易导致双向数据绑定失败

                4.vuex 的数据一旦页面刷新 数据会回归到默认值

                        解决: 结合数据补偿(sesionStorage)

        state的使用:

                定义各种变量     通过this.$store.state.变量名 来获取变量的值

                state里面的变量必须调用mutations里面的方法进行修改 

        mutations的使用:

                定义各种函数 用来修改state数据 每个函数有两个参数: state和传入要修改的数据的值

                调用mutations方法:

                this.$store.commit('mutataions方法', 修改的新值)

                只能传一个值,如果是多个数据可以传递一个对象

        getters的使用:

                vuex中的计算属性

                定义一个属性名 值接收一个回调函数 这个函数参数只有一个: state

                函数的返回值就是当前getters变量的新值

                获取:  this.$store.getters.变量名

                getters计算属性的变量无法更改 无法定义存值器和取值器

        actions的使用:

                这里面定义的方法支持异步方法 如果只是单纯的同步方法建议写到mutations里面

                actions里面写异步函数

                actions里面每一个变量都要定义成回调函数 参数接收一个 context 上下文对象(就是当前的vuex对象)

                actions里面定义的异步代码 不能直接修改state里面的变量  需要调用mutations方法修改state变量

                调用actions方法:  this.$store.dispatch('actions方法名',传入的参数)