标签：cti bpa vue-cli 点击 允许 浏览器 image 全局 port
有信心的可以去看官方的文档
vue 的官方文档有个显著的特点---代码粘贴不全
Vue中文站：cn.vuejs.org
vue-router官方教程：router.vuejs.org/zh-cn
vuex官方教程：vuex.vuejs.org/zh-cn
我默认你的vue-cli已经装好了你会有这么一个目录
这里不用我解释了吧! <*_*> 如果还不会安装vue-cli的可以 去我的之前的博客观看 vue脚手架---vue-cli
现在开始准备工作
1-0 现在src目录下创建store文件夹
1-1 在store文件夹下创建
index.js // 文件都会汇聚到这个地方来,也是创建store对象的地方,就像store的入口一样
actions.js //存放vuex的核心处理函数
getters.js //工具接口为了方便构建全局state自定义方法
mutations.js //改版store中各种状态的地方
rootState.js //我参考一个大神的做法创建rootState.js保存顶层的数据
配置数据
2-0 src->store->index.js
import Vue from ‘vue‘; import Vuex from ‘vuex‘; import * as actions from ‘./actions‘; import * as mutations from ‘./mutations‘; import * as getters from ‘./getters‘; import state from ‘./rootState‘; Vue.use(Vuex) const store = new Vuex.Store({ state, getters, actions, mutations }) export default store;
2-1 src->main.js
将store对象挂载到main.js中
import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ // import ElementUI from ‘element-ui‘ // import ‘element-ui/lib/theme-default/index.css‘ import store from ‘./store/index‘; //element-ui使用 //Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({ el: ‘#app‘, router, store, template: ‘<App/>‘, components: { App } })
//一个实例
src->components->demo-vuex.vue
<template> <div> {{name}} <button @click="fun">点击改变msg</button> <br> msg: {{msg}} </div> </template> <style scoped> </style> <script> import {mapGetters, mapActions} from ‘vuex‘; export default{ data(){ return { name:"demo-vuex" } }, computed: {...mapGetters([‘msg‘])}, //对应getters.技术中的msg methods: {...mapActions([‘fun‘])} //对应 Actions中fun方法 } </script>
目的很简单 点击按钮 改变msg的值
测试组件src->components->demo-vuex2.vue
<template> <div> {{msg}} </div> </template> <style scoped> </style> <script> import {mapGetters} from ‘vuex‘; export default{ data(){ return {} }, computed:{...mapGetters([‘msg‘])} } </script>
该组件为了查看是否实现组件间的传值问题
路由配置 src->router->index.js
import Vue from ‘vue‘ import Router from ‘vue-router‘ import Demo from ‘components/demo-vuex‘ import Demo2 from ‘components/demo-vuex2‘ Vue.use(Router) export default new Router({ routes: [ { path: ‘/demo‘, name: ‘demo‘, component: Demo }, { path: ‘/demo2‘, name: ‘demo2‘, component: Demo2 } ] })
src->store->rootState.js
const state = { msg: ‘我是原始数据‘, } export default state;
我把rootState.js当做数据初始化的地方 初始化msg 并暴露出state
src->store->actions.js
export const fun = ({commit}) => {
commit({
type: ‘getMsg‘, //对应mutation.js中的getMsg方法
msg: ‘我是修改后的数据...‘
});
};
把将要修改的值发送到mutations.js中---值只允许在mutations.js中修改
src->store->mutations.js
export const getMsg = (state, payload) => { state.msg = payload.msg; }
修改state.msg值 , payload.msg对应actions.js中传过来的值
src->store->getters.js
export const msg = state => state.msg;
最简单的服务 将值获取再返回
测试一下 对不对
运行
npm run dev
浏览器输入
http://localhost:8080/#/demo
看到一下界面
点击后数据改变
从其他组件测试一下
浏览器输入
http://localhost:8080/#/demo2 看看是否是改变后的数据
vue-cli+webpack+router+vuex---之vuex使用
标签：cti bpa vue-cli 点击 允许 浏览器 image 全局 port
原文地址：http://www.cnblogs.com/web-Rain/p/6495364.html
