之前使用vuex都是迷迷糊糊的,今天從新縷了一遍
1.安裝用npm 后面要加上 --save 因?yàn)檫@個(gè)vuex包后面成產(chǎn)環(huán)境也要用.
2.在src文件夾下新建一個(gè)文件夾,起個(gè)名字,比如"vuex"或者"store"之類的
3.然后在文件夾下建一個(gè)js文件,叫store.js或者index.js都行
4.在文件里面,用improt引入vuex和vue,然后用Vue.use()引用
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
5.在min.js中用import引入,并在下面的實(shí)例化vue對(duì)象的時(shí)候加入
import store from './store/index'
new Vue({
el: '#app',
router,
store, //<--這里
components: { App },
template: '<App/>'
})
下面說下項(xiàng)目中的應(yīng)用
直接上代碼,看注釋
index.js
//之前說的引入
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
//增加常量對(duì)象
const state = {
loginName: '',
loginState: -1
}
//下面是方法
//這里的 mutations 是固定的寫法，意思是改變的，
//所以先不用著急，只知道我們要改變 state 的數(shù)值的方法，
//必須寫在 mutations 里就可以了。
//必須寫在 mutations 里就可以了。
//必須寫在 mutations 里就可以了。
const mutations = {
changeLogin(state,status){
state.loginState = status;
},
updLoginName (state, name) {
state.loginName = name
}
}
//actions 和上前講的 Mutations 功能基本一樣
//不同點(diǎn)是，actions 是異步的改變 state 狀態(tài)，而 Mutations 是同步改變狀態(tài)。
//actions 是可以調(diào)用 Mutations 里的方法的
const actions = {
loginAction({commit},y){
commit('changeLogin',y);
},
updLoginName({ commit }, x){
commit('updLoginName', x)
}
}
export default new Vuex.Store({
state,
mutations,
actions
})
vue組件1 -- 傳入/修改
import { mapActions } from 'vuex' //引入
function load(vue) {
let that = this
C.call('getUserInfo', {}).then(function (d) {
vue.userName = d.userName;
vue.status = d.status;
vue.updLoginName(vue.userName); //給vuex傳入用戶名
vue.loginAction(vue.status) //給vuex傳入登錄狀態(tài)
})
}
export default {
data() {
return {
};
},
methods: {
...mapActions([
'updLoginName',
'loginAction'
])
}
};
vue組件2 -- 獲取
//script
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations([
'loginName',
'loginState'
])
}
}
<div v-if="$store.state.loginState !== 0">
<span>{{ $store.state.loginName }}</span>
</div>
<div v-if="$store.state.loginState === 0">
<span>請(qǐng)登錄</span>
</div>
