vuex官方文檔:點擊打開鏈接
1、Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式
(1).vuex解決了組件之間同一狀態的共享問題 (解決了不同組件之間的數據共享)
(2).組件裏面數據的持久化。
小項目儘量不要使用用vuex
2、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;
7、組建裏面使用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');
8、實例代碼:
(1).src/vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
/*1.state在vuex中用於存儲數據*/
var state={
count:1
}
/*2.mutations裏面放的是方法,方法主要用於改變state裏面的數據
*/
var mutations={
incCount(){
++state.count;
}
}
//vuex 實例化 Vuex.store
const store = new Vuex.Store({
state,
mutations
})
export default store;
(2).主頁中使用store改變數據,文件位置src/components/Home.vue
<template>
<div id="home">
我是首頁組件 -- {{this.$store.state.count}}
<br>
<button @click="incCount()">增加數量+</button>
</div>
</template>
<script>
//1. 引入store 建議store的名字不要變
//import MyStore from '../vuex/store.js'
import store from '../vuex/store.js';
//2.註冊
export default{
data(){
return {
msg:'我是一個home組件',
value1: null,
}
},
store, //如果改了,應該使用這樣的格式:store:MyStore
methods:{
incCount(){
//改變vuex store裏面的數據
this.$store.commit('incCount'); /*觸發 mutations 改變 state裏面的數據*/
}
}
}
</script>
<style lang="scss" scoped>
</style>
(3),新聞組件使用store,改變數據,文件位置:src/components/News.vue
<template>
<div id="news">
我是新聞組件 --{{this.$store.state.count}}
<br>
<button @click="incCount()">增加數量</button>
</div>
</template>
<script>
//1. 引入store
import store from '../vuex/store.js';
export default{
data(){
return {
msg:'我是一個新聞組件'
}
},
store,
methods:{
incCount(){
this.$store.commit('incCount');
}
}
}
</script>
<style lang="scss" scoped>
.list{
li{
height:3.4rem;
line-height:3.4rem;
boder-bottom:1px solid #eee;
font-size:1.6rem;
a{
color:#666;
}
}
}
</style>
(4).隔離開的路由,文件位置:src/router/router.js
import Vue from 'vue';
//配置路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//1.創建組件
import Home from '../components/Home.vue';
import News from '../components/News.vue';
import User from '../components/User.vue';
//2.配置路由 注意:名字
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News, name: 'news' },
{ path: '/user', component: User },
{ path: '*', redirect: '/home' } /*默認跳轉路由*/
]
//3.實例化VueRouter 注意:名字
const router = new VueRouter({
mode: 'history', /*hash模式改爲history*/
routes // (縮寫)相當於 routes: routes
})
//5 <router-view></router-view> 放在 App.vue
export default router;
(5).main.js文件:
import Vue from 'vue';
import App from './App.vue';
//引入公共的scss 注意:創建項目的時候必須用scss
// import './assets/css/basic.scss';
import router from './router/router.js';
//4、掛載路由
new Vue({
el: '#app',
router,
render: h => h(App)
})
(6).根組件:App.vue
<template>
<div id="app">
<header class="header">
<router-link to="/home">首頁</router-link>
<router-link to="/news">新聞</router-link>
</header>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
msg:'歡迎來到vue,我是根組件'
}
}
}
</script>
<style >
.header{
height:4.4rem;
background:#000;
color:#fff;
line-height:4.4rem;
text-align:center;
a{
color:#fff;
padding:0 2rem
}
}
</style>