Vue笔记十：Vuex状态管理

vuex概念

Vuex是状态管理，这里的状态可以看成是Vue中的属性，和其他属性相比，所有组件都可以引用Vuex里面的属性，就是常说的数据共享。
Vuex相当于一个仓库，所有的组件都可以到仓库存取东西。

Vuex基础应用

第一步 安装，打开终端，输入指令

cnpm install vuex -S
1

第二步 引用Vuex，打开main.js，在main.js中引入Vuex，代码如下：

import Vuex from 'vuex'
Vue.use(Vuex)
1
2

第三步 在src目录下新建store文件夹，并在文件夹中新建index.js文件
在文件中写入以下代码：

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

Vue.use(Vuex)

var store=new Vuex.Store({
	state:{
		// state相当于data
		num:110
	}
})
export default store
1
2
3
4
5
6
7
8
9
10
11
12

第四步 在main.js中挂载并导入，如下

然后，我发现了一个很坑的地方，因为我的代码没有报错，但是，控制台上面有一个错误并伴随大量的错误提示是这样的：

然后在我无限百度之后发现，原因是因为vuex和vue是有版本对应的，Vue 3 匹配 Vuex 4 ，Vue 2 匹配 Vuex 3
解决办法是：
先卸载现在的vuex

npm uninstall vuex --save
1

再安装匹配版本的

npm install vuex@3 --save
1

就解决了

然后随便在哪个组件都可以引用vuex了
例如在helloworld.vue中输入：

<h1>{{$store.state.num}}</h1>
1

即可直接引入，仓库里面的变量了