vuex3配置,vuex3代码模板,适配vue2版本
前言:
- 本文章不适合
vue 3
版本,只适合vue2
版本 vuex3
适配vue2
,vuex4
适配vue3
- vuex3 原理图
原理图展示的是组件修改存放在vuex中的值,首先先将要(修改的数据名以及修改的数据值)传递到actions对象的
方法中actions对象的方法
里面可以与后端api连接,也可以处理从组件拿到的value值(数据)做一些数据判断的逻辑,再将这个value值提交到mutations对象里对应的方法里面。
mutations对象
直接对接vuex开发者工具,这里修改的数据能被开发者工具监视到。在mutations对象
的方法中,对存放在state对象里面的值直接进行修改,修改的结果会被重新渲染到组件中,这个过程就是「组件修改存放在vuex中的值」的过程。
值得注意的是,组件也是可以绕过actions对象直接和mutations对象中的方法对话的
安装
npm i vuex@3
配置Vuex的Store
1⃣️ main.js
以下为代码模版
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store'
Vue.use(Vuex)
new Vue({
store,
render: h => h(App)
}).$mount('#app')
2⃣️ 在src
目录下创建一个目录store
3⃣️ 在store文件夹 📁 里面创建index.js
,并参加一个自定义名字的js文件(图里用calculatorOptions.js
)为例子,该文件用来封装vuex操作中的几个重要的对象。
calculatorOptions(自定义文件名).js
以下为代码模版,里面存在的一些方法目的是为了说明功能,直接复制该代码放到文件里,再对代码无关部分进行删除重写即可。
// 该文件用于创建vuex中最为核心的store
export default {
// 开启命名空间,让组件只能通过对应的命名空间访问到对象中的方法
namespaced:true,
// 用于响应组件中的动作
actions: {
add(context, value) {