vuex
vuex解决不同组件的数据共享，数据持久化。
1.安装：
npm install vuex --save
2.在main.js导入包
import Vuex from 'vuex'
3.在main.js注册包
Vue.use(vuex)
4.在main.js里面new Vuex.store实例，得到一个仓储对象。
var store = new Vuex.Store({
state:{
//state是组件中的data,专门用来存储数据的
count: 0 //全局有一个0数据
//如果在组件中想要访问store中的数据，只能通过this.$store.state.***来访问
//例如访问上面0:<input type="text" v-model="$store.state.count">
},
mutations: {//mutations是方法，主要用于·
//如果要操作store中的state值，只能通过调用mutations提供的方法，才能操作对用的数据
//不推荐直接操作state中的数据，因为万一导致数据紊乱，不能快速定位到错误的原因，因为，每个组件都可能有操作数据的方法；
increment(state){ //increment是方法名，第一个参数state是规定死的。
state.count++
}
//注意：如果组件想要调用mutations中的方法，只能使用this.$store.commit('方法名')
//这种调用mutations方法的格式，和this.$emit('父组件中方法名')
}
})
5.在main.js里面挂载store(和挂载路由一样)
const vm = new Vue({
el: '#app',
render: c => c(app),
router //挂载路由
store //将vuex创建的store 挂载到VM实例上。
//只要挂载到vm上，任何组件都能使用store来存取数据
})
vuex的使用：
1、src目录下面新建一个vuex的文件夹
2、vuex 文件夹里面新建一个store.js
3、安装vuex
cnpm install vuex --save
4、在刚才创建的store.js引入vue 引入vuex 并且use vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
5、定义数据
/*1.state在vuex中用于存储数据*/
var state={
count:1
}
6、定义方法 mutations里面放的是方法，方法主要用于改变state里面的数据
var mutations={
incCount(){
++state.count;
}
}
暴露
const store = new Vuex.Store({
state,
mutations
})
export default store;
组建里面使用vuex：
1.引入 store
import store from '../vuex/store.js';
2、注册
export default{
data(){
return {
msg:'我是一个home组件',
value1: null,
}
},
store, //注册
methods:{
incCount(){
this.$store.commit('incCount'); /*触发 state里面的数据*/
}
}
}
3、获取state里面的数据
this.$store.state.数据名
4、触发 mutations 改变 state里面的数据
this.$store.commit('incCount');
网友评论