1.安装配置vuex，版本依赖
vue2的项目使用vuex3，vue3的项目使用vuex4
npm install vuex --save 这个指令默认安装Vuex4
npm install vuex@3 @代表安装指定版本的Vuex3
2.创建 store/index.js 文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 全局都可以使用的数据
state: {
},
// getters, 相当于对state里的数据进行运算得到的数据 类似于computed对于data的处理
getters: {
},
// mutations，定义修改state里面数据的方法
mutations: {
},
// actions用法--actions中的方法触发mutations中的方法从而改变state里的数据;
// 除此之外，如果需要异步操作，就必须在actions中执行
actions: {
},
// 将同一类型的数据组合成一个模块
modules: {
}
})
3、Vuex的基本使用
Vuex实现了一个单向数据流，在全局拥有一个State存放数据，所有修改State的操作必须通过Mutation进行，Mutation的同时提供了订阅者模式供外部插件调用获取State数据的更新。所有异步接口需要走Action，常见于调用后端接口异步获取更新数据，而Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。Vuex运行依赖Vue内部数据
1,$store.state
通过这个方式，能直接使用state里的数据
<i>msg:{{$store.state.msg}}</i>
<p>num:{{$store.state.num}}</p>
2、mutations
要想修改state的数据必须通过mutations
在store/index.js中配置
// mutations，定义修改state里面数据的方法
mutations: {
updateMutationMsg (state) {
state.msg = '修改之后的msg数据'
}
},
//在 .vue的文件中使用
methods: {
updateStoreMsg () {
// 组件methods通过调用vuex实例的commit方法触发mutations中的方法修改msg
this.$store.commit('updateMutationMsg')
}
},
3，action
所有异步接口需要走Action,然后调用mutations中的方法，更改state中的数据
配置
actions: {
// actions方法中触发mutations中的方法
async actionUpdateNum (c, val) {
const res = await axios.get('http://47.100.227.25:3000/books/queryall')
// 触发vuex实例mutations中的指定方法updateMutaNum
c.commit('updateMutaNum', res[0].id)
}
}
使用
methods: {
// 组件methods中通过vuex实例的dispatch方法触发vuex中actions里的方法，
updateNum (val) {
this.$store.dispatch('actionUpdateNum', val)
}
},
4.getters
// getters, 相当于对state里的数据进行运算得到的数据 类似于computed对于data的处理,需要返回值
getters: {
numDouble (state) {
return state.num * 2
}
},
5，modules
将相关的数据处理作为一个模块
modules: {
hh: msgModule
}
const msgModule = {
// 全局都可以使用的数据
state: {
},
// getters, 相当于对state里的数据进行运算得到的数据 类似于computed对于data的处理
getters: {
},
// mutations，定义修改state里面数据的方法
mutations: {
},
// actions用法--actions中的方法触发mutations中的方法从而改变state里的数据;
// 除此之外，如果需要异步操作，就必须在actions中执行
actions: {
},
// 将同一类型的数据组合成一个模块
modules: {
}
}
