vuex的基本用法

函数:

它采用集中存储来管理应用程序所有组件的状态。(对所有组件通用的数据进行统一管理)

构成:

状态:管理所有状态(数据)

Getter:状态的计算属性

突变:用于操作状态

用法:

1.0定义

//在store/index.js中

导出默认的新Vuex。store({ state:{ userInfo:& # 39；'}})

2.0使用

//在。vue(组件)

////值

这个。$store.state.userInfo

////分配

这个。$store.state.userInfo={}

总结:

在vuex中，如果要给vuex中的数据赋值，不能直接获取状态赋值，不符合vuex设计规范。

基本上使用的是vuex-mapState。

它是vuex中对应状态的辅助功能。

MapState:可以用来简化vuex中State属性的使用。

步骤:

引入

从& # 39；导入{ mapState };vuex & # 39

定义

计算值:{…mapState([& quot；处于“])”状态的属性名

使用

this.state中的属性名= = = & # 160；这个中的属性名称。$商店.州.州

vuex-突变的使用

在& # 160；vuex & # 160，如果你想给& # 160；国家& # 160；属性赋值中，建议你用& # 160；突变& # 160；要赋值

步骤:

1.0 at & # 160突变& # 160；在中定义分配方法

//在store/index.js中

出口& # 160；默认& # 160；新& # 160；Vuex。商店({

    状态:{ userInfo:& # 39；'},

    突变:{ setUserInfo ( state，payload ) {

            state.userInfo =有效负载

    }

}})

2.0调用组件中的方法

//在。vue(组件)

 //取值

这个。$store.state.userInfo

 //赋值

这个。$ store . commit(& # 39；setUserInfo & # 39，数据)

基本上使用vuex-map变型

MapMutaions:它可以用来简化vuex中突变的方法调用。

步骤:

进口& # 160；地图突变

从& # 39；导入{ mapMutaions };vuex & # 39

定义方法:

方法:{…地图突变([& # 39；setUserInfo & # 39])}

用法:

this . set userinfo(& # 39；abc & # 39)

总结:

vuex:

状态:管理状态

价值:

这个。$store.state.xxx

…mapState([& # 39；xxx & # 39]) 或者& # 160；…mapState({ my name:& # 39；xxx & # 39})

突变

价值:

这个。$ store . commit(& # 39；xxx & # 39有效载荷)

…地图突变([& # 39；xxx & # 39]) 或者& # 160；…地图突变({我的名字:& # 39；xxx & # 39})

vuex最详细完整的使用用法？

vuex的使用方法：

1、用Vue脚手架工具构建好项目；

2、利用npm包管理工具安装vuex；

3、新建一个store文件夹，并在文件夹下新建“store.js”文件；

4、在文件中引入vue和vuex。

vue的兼容性怎么解决？

在项目开始的时候，要先确定项目是否兼容到 IE8 及一下的版本，因为vue支持 IE8 以及更低版本 。

1、ES6语法不支持

解决方法：

引入babel-polyfill

npm install –save bable-polyfill

webpack.base.conf.js中修改为

app:

main.js 中引入

import 'babel-polyfill';

2、GET非首次请求时，IE默认使用缓存而不是去后台请求

解决方法：

在request拦截时，加时间戳

service.interceptors.request.use(config => {

// Do something before request is sent

// // 时间戳

if (config.method === 'get') {

config.params = {

t: Date.parse(new Date()) / 1000,

…config.params

}

}

return config;

}, error => {

// Do something with request error

console.log(error); // for debug

Promise.reject(error);

3、上传文件时，文件类型检查。如果为.apk文件，则file.type为" ".而jpg/png等文件正常

导致上传apk文件时，会报类型检查错误

解决方法：

export function validateApk(file) {

if (file.type === 'application/vnd.android.package-archive') {

return true;

} else {

if (file.name.substring(file.name.lastIndexOf('.') + 1) === 'apk') {

return true;

}

}

return false;

4、上传文件时，后台读取file.getName或者file.getOriginalName为全路径名称

解决方法：

后台去处理，如果为全路径，则进行字符串截取

vuex在IE11的兼容问题

IE11没有内置promise，所以用不了vuex很正常。为了兼容，首先要安装一个库。

安装好之后在main.js中引入，然后在build中配置一下入口entry即可

vue init和vue create用哪个好？

vue create是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目

vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)

所以他俩没法比较哪个好那个不好

Vue.js入门先学什么？

Vue是一个全新的前台页面框架，所用的语言只限于HTML元素，CSS规则，Javascript代码，对于一个新手，这就是所需要的所有东西，但是目前的页面开发，不可避免的会用到一些有名的JS框架，例如Jquery，BootStrap，所以还是需要了解这些js框架的使用Vue开发需要用到npm，这是nodejs的组件管理工具，但事实上不需要学习nodejs的内容。

Vue需要用到的一些组件，例如webpack，vuex，都是一些组件或者是工具，不需要学习特别的语言，只要学习简单的调用就可以了