vuex的使用

小程序使用vuex

通过vuex管理小程序项目数据。
我们已经成功引进vuex
不懂怎么引入看vuex的官网我就不一一介绍了
官网链接:https://vuex.vuejs.org/zh/

第一步新建文件夹vuex
在vuex里面
1新建actions.js
代码:

const actions = {
}

export default actions;

2新建getters.js
代码：

const getters = {
    
}

export default getters

3新建mutations.js

const mutations = {
}

export default mutations

4新建index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'
const state = {
  account:'博客代码经常更新发布干货',//数据
}
const store = new Vuex.Store({
  strict: debug,
  state,
  getters,
  mutations,
  actions,
})

export default store

建好如图下：这就完成了vuex的结构可以管理小程序数据

ps：要是项目很大建议模块的方式管理

现在开始调用
在main.js引入
代码：

import Vue from 'vue'
import App from './App'
import store from './vuex/index'
Vue.config.productionTip = false
Vue.prototype.$store = store
App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

然后拿数据在你要数据的页面
代码如下：

<script>
	import { mapState } from "vuex";
	import { mapMutations } from "vuex";
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		computed: {
			...mapState({
				account: state => state.account, //注意路径获取account的数据
			}),
		},
		mounted() {
			console.log("account的数据"+this.account)
		},
		methods: {
      
		}
	}
</script>

运行结果：

这时候你已经成功拿到数据管理
**接下来修改state里面的数据 **
1.找到mutations.js
写方法代码如下：

const mutations = {
  //调用方法
  login:function(state,account){
    state.account = account;   
   },
}

export default mutations

2在你要调用的页面如：index代码

<script>
	import { mapState } from "vuex";
	import { mapMutations } from "vuex";
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		computed: {
			...mapState({
				account: state => state.account, //账号
			}),
		},
		mounted() {
			  console.log("account的数据"+this.account)
		},
		methods: {
        ...mapMutations(["login"]),//调用方法
		acclick:function(){
			const stat="修改account数据成关注我的博客谢谢";
			//调用方法
			this.login(stat);
			//在次打印account数据
			console.log(this.account);
		},
		}
	}
</script>

结果如图

当你发现刷新state数据会清空
这是我遇到的坑找了很久才解决
在app.vue页面：
代码:

created () {
		    // 在页面加载时读取sessionStorage里的状态信息
		    if (sessionStorage.getItem("store") ) {
		        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
		    } 
		    // 在页面刷新时将vuex里的信息保存到sessionStorage里
		    window.addEventListener("beforeunload",()=>{
		        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
		    })
		  },

这是在小程序上用vuex管理数据，有不懂或错误评价改正。