【Vuex的工作原理图】通解工作原理+搭建Vuex工作环境 |
您所在的位置：网站首页 › vue主要工作原理 › 【Vuex的工作原理图】通解工作原理+搭建Vuex工作环境 |
【Vuex的工作原理图】通解工作原理+搭建Vuex工作环境
|
Vuex的工作原理图
 生活中的例子（客人->{老板开的饭店：服务员,后厨，饭菜}）这样的一个关系
搭建Vuex工作环境
npm i vuex(npm i vuex@3)指定版本 引入 使用（Vue.use(Vuex)） store vc ⇒ store //引入插件 import Vuex from 'vuex' Vue.use(Vuex) // 也就是创建了一个storevuex写法： 该文件用于创建Vuex中最为核心的store 所以在这个index,js里面就应该做成这样： //引入Vue import Vue from 'vue' // 引入Vuex import Vuex from 'vuex' //使用插件 Vue.use(Vuex) // 准备actions ---用于响应组件中的动作 const actions = {} // 准备mutations ---用于操作数据（state） const mutations = {} // 准备staet ---存储数据（state） const staet = {} // 创建store export default new Vuex.Store({ actions:actions, mutations:mutations, staet:staet }) // export default store也即是： 3.搭建vuex环境 创建文件：src/store/index.js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备actions对象——响应组件中用户的动作 const actions = {} //准备mutations对象——修改state中的数据 const mutations = {} //准备state对象——保存具体的数据 const state = {} //创建并暴露store export default new Vuex.Store({ actions, mutations, state })2、在main.js中创建vm时传入store配置项 ...... //引入store import store from './store' ...... //创建vm new Vue({ el:'#app', render: h => h(App), store }) |
个状态自管理应用包含以下几个部分：
脚手架解析import顺序： 不管import在那个地方，都会一次性汇总到一个最上方进行遍历执行【本文地址】