vuex笔记-创新互联

1、vuex——数据仓库，管理的是状态，是一个专门为vue.js设计的集中式状态管理架构。
状态：可以理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。
比如：我们有几个页面要显示用户名称和用户等级、或者显示用户的地理位置。如果我们不把这些属性设置为状态，那每个页面遇到后，都会到服务器进行查找计算，返回后再显示。在中大型项目中会有很多共用的数据，所以就有了vuex。

专注于为中小企业提供做网站、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业鼓楼免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

2、vuex小demo之显示count并且可以进行加减操作
a.首先npm install vuex --save 本地安装vuex，一定要加上 –save，因为这个包我们在生产环境中是要使用的
b.新建vuex文件夹，里面新建store.js，并且引入vue和vuex
import Vue from 'Vue';
import Vuex from 'Vuex';
Vue.use(Vuex); //注册使用
c.store.js：新建常量对象count，并且通过
export default new Vuex.Store({
state,
mutations
})导出到外部使用
d.在components文件夹下新建vue模板，在模板中引入store.js文件，import store from '@/Vuex/store'

    
                        {{msg}}
                        
                            
                            
                        
                        {{$store.state.count}}
                    
                    导出：export default({
                        data(){
                            return msg:'Vuex'
                        },
                        store //注册
                    })
                    输出count的值：{{$store.state.count}}

 e.在store.js文件中加入两个改变state的方法
                count mutations = {
                    add(state){
                        state.count++;
                    },
                    reduce(state){
                        state.count--;
                    }
                }
        这里的mutations是固定的写法，意思是改变的，我们要改变state的数值的方法，必须写在mutations里。

3、state
一种状态对象，共享值
将状态对象赋值给内部对象，也就是把store.js中的值，赋值到模板中使用（和模板中获得data的方法类似了）
赋值方式有三种：
a.通过计算属性

computed:{
count(){
return this.$store.state.count;
}
}
b.通过数组操作
首先引入mapState
import {mapState} from 'vuex';
然后计算属性：
computed:mapState(['count']),
4、Mutations修改状态(同步)
mutations存在的意义，就是写方法改变状态store中的共享值，可传递参数，如下图
count mutations = {
add(state,n){
state.count+=n;
}
}
使用： //使用方法是用$store.commit()，而不是直接add()，注意了！！！
如果不想在html里面使用$store.commit()这么繁琐，而是想直接用add()，和methods里面的方法一样的用法，那么也可以：
首先引入mapMutations
import mapMutations from 'vuex'
然后定义methods
methods:mapMutations(['reduce'])，
即可在模板里面使用了：
5、getters计算过滤操作
getters：相当于store仓库里的computed，状态每操作一次，都会经过getters过滤一次，类似一个安检门，然后返回给用户
es6 ...操作符，用于将一个数组||类数组||字符串转为用逗号分隔的参数序列，展开数组
这家伙是用来对数组进行操作的，把数组里面的东西统统拿出来
功能是把数组或类数组对象展开成一系列用逗号隔开的值

6、actions异步修改状态(异步)

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：vuex笔记-创新互联
文章地址：http://cdxtjz.cn/article/shsph.html

vuex笔记-创新互联

{{msg}}

{{count}}

其他资讯