uniapp的Vuex使用

uniapp的Vuex使用

一、在项目的根目录下新建一个store文件夹，然后在文件夹下新建一个index.js文件

二、在新建的index.js下引入vue和vuex，具体如下：

//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({//全局变量定义
    state: {
        forcedLogin: false,//是否需要强制登录
        hasLogin: false,
        userName: "",
        userId:'',
        token:'',
        pointId:'',
    },
    mutations: {
        login(state, user) {
            state.userName = user.username || '';
            state.hasLogin = true;
            state.userId = user.id || '';
            state.token = user.token || '';
            state.pointId = user.pointId || '';
        },
        logout(state) {
           state.userName = "";
           state.hasLogin = false;
           state.userId = '';
           state.token = '';
           state.pointId = '';
        }
    }
})
export default store

三、在main.js中注册

想要定义的 js 文件中的变量和方法能在各个页面使用并生效，先在项目目录下的 main.js 文件中导入这个 js 文件并声明方法，如下：

四、在 pages/index/index.vue 使用

1、先在页面导入vuex的方法

2、然后，在 computed 计算属性方法中使用 mapState 对全局变量进行监控。

3、一进来index.vue 页面，在onload（）页面加载的时候，判断是否已是登陆状态，不是的话，弹出对话框，提示进行‘登陆操作’

五、登陆页面

1、先在页面导入vuex的方法。
2、在 computed 计算属性方法中使用 mapState 对全局变量进行监控，在 method中使用 mapMutations 进行全局方法监控，如下所示：

3、网络请求成功后，在回调函数 success 中调用该方法，并把回调函数的返回值数据传给 login 方法

4、随后 store/ index.js 文件中的login方法会把传过来的用户数据保存在vuex。

因为uni-app已经内置了vuex，所以只要正确引入就OK。

1、在项目的根目录下，创建一个名为store的文件夹然后在该文件夹下创建一个index.js的js文件
2、在该js文件下定义公共的数据以及方法函数，并且把它导出

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {}
})
export default store

3、在入口文件即：main.js挂载vuex

import Vue from 'vue'
import App from './App'
//引入vuex
import store from './store'
//把vuex定义成全局组件
Vue.prototype.$store = store
Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App,
//挂载
    store
})
app.$mount()

4、在单页面里使用vuex

<script>
    export default {
        created () {
            console.log(this.$store)
        }
    }
</script>