之前使用vuex都是迷迷糊糊的,今天从新缕了一遍
1.安装用npm 后面要加上 --save 因为这个vuex包后面成产环境也要用.
2.在src文件夹下新建一个文件夹,起个名字,比如"vuex"或者"store"之类的
3.然后在文件夹下建一个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引入,并在下面的实例化vue对象的时候加入
import store from './store/index'
new Vue({
el: '#app',
router,
store, //<--这里
components: { App },
template: '<App/>'
})
下面说下项目中的应用
直接上代码,看注释
index.js
//之前说的引入
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
//增加常量对象
const state = {
loginName: '',
loginState: -1
}
//下面是方法
//这里的 mutations 是固定的写法，意思是改变的，
//所以先不用着急，只知道我们要改变 state 的数值的方法，
//必须写在 mutations 里就可以了。
//必须写在 mutations 里就可以了。
//必须写在 mutations 里就可以了。
const mutations = {
changeLogin(state,status){
state.loginState = status;
},
updLoginName (state, name) {
state.loginName = name
}
}
//actions 和上前讲的 Mutations 功能基本一样
//不同点是，actions 是异步的改变 state 状态，而 Mutations 是同步改变状态。
//actions 是可以调用 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传入登录状态
})
}
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>请登录</span>
</div>
