一、安装Vuex
安装命令:
npm install vuex --save
二、新建store.js
文件
文件内容如下:
import Vue from 'vue';// 引入vue
import Vuex from 'vuex';// 引入vuex
Vue.use(Vuex); // 使用vuex插件
// Store实例
export default new Vuex.Store({
// vuex的数据,类似组件里的data
state: {
name: 'abc'
},
// 通过actions的commit触发mutations来修改state的数据
actions: {
// 第一个参数是用于触发mutations,第二个参数是使用的地方传过来的数据
nameAction({ commit }, data) {
//可以是ajax等异步操作
commit('newName', data);
}
},
// 同步修改state里面的数据
mutations: {
// 第一个参数是上面的state数据,第二个参数是commit传过来的数据,用以修改state数据。
newName(state, data) {
state.name = data; // 更改state的数据
}
}
});
三、引入Vuex
在main.js
文件中引入Vuex:
import store from './store'; // 引入store
四、使用Vuex
export default {
mounted(){
console.log('vuex的数据',this.$store.state.name)
}
methods:{
editName () {
// commit只接受一个参数,数据多就用对象传递
this.$store.dispatch('nameAction', '传过去的新属性')
}
}