前言
- 文档:https://www.cnblogs.com/Zbaozi/p/10135719.html
- 文档:https://www.cnblogs.com/yhquan/p/10369140.html
- 文档:https://blog.csdn.net/qq_41772754/article/details/88074103这个比较详细
使用方式
- 第一步-创建store-test.js
// 第一步:引入Vue、和Vuex(固定写法)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 第二步:声明Vuex 的五个属性,其中state, mutations 是一定要定义的,其他的三个属性对象根据实际需要。
const state = { // 初始化状态值--一定要有该属性对象
MenuSwitchState: true,
StudNum: 3
}
const mutations = { // 自定义改变state初始值的方法--一定要有该属性对象
}
const getters = { // 状态计算属性--该属性对象不是必须的
}
const actions = { // 异步操作状态--该属性对象不是必须的
}
const modules = { // 状态模块--该属性对象不是必须的
}
// 第三步:创建一个 store 实例,将声明的五个变量赋值赋值给 store 实例,如下:
const StoreTest = new Vuex.Store({
state,
mutations,
//下面三个非必须
getters,
actions,
modules
})
// 第四步:导出 store 实例,供外部访问
export default StoreTest
- 第二步- 在main.js引入
import store from './store/store-test'
// 实例化vue对象
let myVue = new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
- 第三步-在页面使用
- 直接获取state参数
this.$store.state.StudNum - 通过get获取:
略(因为我还没写到,所以待补充) - 通过action设置参数
略(因为我还没写到,所以待补充)