We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
vuex 是为了解决复杂项目组件之间的数据通信的一个全局状态管理机制,相信很多人都听说过这个东西。有部分人还没有在项目中使用Vuex管理过数据状态,实际上Vuex的起步使用非常之简单,看完本文之后,赶紧在项目中用起来吧!
Vuex
npm install vuex --save
store.js
Vuex 必需的内容都在下面这个文件中,文件中做了详细的注释,注意其中的异步操作actions和同步操作mutations。
actions
mutations
// store.js // 引入vue 和 vuex import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); // 使用vuex插件,跟router一样 // 直接导出 一个 Store 的实例 export default new Vuex.Store({ // 这里是要读取或者写入数据的地方,跟组件里的data项一样 state: { name: 'oldName' }, // 通过actions的commit触发mutations来修改state的数据 // 这里可以包含任意的异步操作,只要最后 actions: { // 第一个参数是用于触发mutations,第二个参数是使用的地方传过来的数据 nameAction({ commit }, data) { // do something 可以是ajax、promise等异步操作 commit('updateName', data); } }, // 同步操作直接修改state里面的数据 mutations: { // 第一个参数是上面的state数据,第二个参数是commit传过来的数据,用以修改state数据。 updateName(state, data) { state.name = data; // 更改state里的数据 } } });
main.js
这是最后一步了,做完这步,然后我们就可以在项目中使用Vuex了。
// main.js import Vue from 'vue'; import App from './App'; import store from './store'; // 引入store new Vue({ el: '#app', store, // 挂载在Vue的配置项中 components: { App }, template: '<App/>' });
// main.js import Vue from 'vue'; import App from './App'; import store from './store'; // 引入store
new Vue({ el: '#app', store, // 挂载在Vue的配置项中 components: { App }, template: '<App/>' });
在组件中的使用如下,省略了template部分:
template
// 组件中 <script> export default { mounted(){ console.log('vuex的数据',this.$store.state.name) } methods:{ changeName () { // commit只接受一个参数,�数据多的话,就用对象传递 this.$store.dispatch('nameAction', '传过去的新名字') // 先触发actions,再由commit触发mutations来修改数据 } } </script>
使用方式是一样的,只是调用的�名字,稍微有些改变。
重复引用问题:
现在项目中基本使用的都是Webpack打包,所以我们不用担心重复引用的问题。
webpack会记忆你之前有没有引用过这个文件/包,整个项目只会引用一次。
// some.js import store from './store'; // 引入vuex console.log('vuex的数据', store.state.name); store.dispatch('nameAction', '传过去的新名字')
实际上使用 Vuex 只需要store.js文件,然后再把文件引到main.js入门文件中,挂在new Vue的配置项中即可使用。
new Vue
如此之简单,快点来试试吧!
博客链接
The text was updated successfully, but these errors were encountered:
No branches or pull requests
博客链接
# Vuex 的使用入门-极简使用
vuex 是为了解决复杂项目组件之间的数据通信的一个全局状态管理机制,相信很多人都听说过这个东西。有部分人还没有在项目中使用
Vuex
管理过数据状态,实际上Vuex
的起步使用非常之简单,看完本文之后,赶紧在项目中用起来吧!# 1. 安装 Vuex 包
# 2. 新建一个
store.js
文件:Vuex 必需的内容都在下面这个文件中,文件中做了详细的注释,注意其中的异步操作
actions
和同步操作mutations
。# 3. 引入到
main.js
入口文件中 - 最后一步这是最后一步了,做完这步,然后我们就可以在项目中使用
Vuex
了。# 在组件中使用 vuex:
在组件中的使用如下,省略了
template
部分:# 在 js 文件中使用 vuex:
使用方式是一样的,只是调用的�名字,稍微有些改变。
重复引用问题:
现在项目中基本使用的都是Webpack打包,所以我们不用担心重复引用的问题。
webpack会记忆你之前有没有引用过这个文件/包,整个项目只会引用一次。
# 小结
实际上使用 Vuex 只需要
store.js
文件,然后再把文件引到main.js
入门文件中,挂在new Vue
的配置项中即可使用。如此之简单,快点来试试吧!
# 点个Star支持我一下~
博客链接
The text was updated successfully, but these errors were encountered: