【vuex】

vuex原理图

Vue Components可以与Mutations直接联系，即可直接调用commit

需要store存储

总结：
1、需要知道Actions,Mutations,State
2、以上都为对象数据类型
3、方法都需要通过store调用
4、要所有的组件都能看到store

搭建vuex环境

1、npm i vuex@3
//因为vue2只支持vuex3
2、在mian.js中引入vuex,且use()一下

3、创建store
(1)方式一

（二、官方文档）

在index.js文件中，创建并暴露store

//该文件用于创建vuex 中最为核心的store

//引入Vuex
import vuex from "vuex";
//准备actions,用于响应组件中的动作
const actions={}
//准备mutations,用于操作数据（state）
const mutations={}
//准备state,用于存储数据
const state={}

//创建并暴露store
export default new Vuex.Store({
    actions: actions,
    mutations: mutations,
    state: state
})
//创建store
const store = new Vuex.Store({
    actions:actions,
    mutations:mutations,
    state:state
    /*
    可以触发：属性名和数据名相同
    actions,
    mutations,
    state*/
})

//暴露/导出store
export default store


/*
export default命令
import命令在加载变量名或函数名时，需要事先知道导出的模块的接口名，否则无法加载。可以使用export default命令指定模块的默认输出接口。
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

4、在main.js中导入store

//引入store
import store from "@/store/index";

1
2
3

`

5、此时运行会出错

解决方法：
将Vue.use(Vuex)剪切到index.js中，在index.js中导入vuex

最终main.js代码：

import Vue from 'vue'
import App from './App.vue'
//引入插件
// import vueResourse from 'vue-resource'


Vue.config.productionTip = false

//使用插件
// Vue.use(vueResourse)


//引入store
import store from "@/store/index";

//创建vm，全局事件总线
new Vue({
  render: h => h(App),
  store,
  beforeCreate() {
    Vue.prototype.$bus = this
  }

}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

最终index.js代码

//该文件用于创建vuex 中最为核心的store

//引入Vuex
import vuex from "vuex";
import Vue from "vue/types/index";

//使用vuex
Vue.use(vuex)

//准备actions,用于响应组件中的动作
const actions={}
//准备mutations,用于操作数据（state）
const mutations={}
//准备state,用于存储数据
const state={}


//创建并暴露store
export default new Vuex.Store({
    actions: actions,
    mutations: mutations,
    state: state
})
//创建store
const store = new Vuex.Store({
    actions:actions,
    mutations:mutations,
    state:state
    /*
    可以触发：属性名和数据名相同
    actions,
    mutations,
    state*/
})

//暴露/导出store
export default store


/*
export default命令
import命令在加载变量名或函数名时，需要事先知道导出的模块的接口名，否则无法加载。可以使用export default命令指定模块的默认输出接口。
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44