pinia 修改数据渲染不成功

Question

pinia修改数据后，页面没有渲染，值是修改成功的

store.js

页面效果

Answer 1

【相关推荐】

• 这篇文章讲的很详细，请看：pinia的简单用法
• 除此之外, 这篇博客: uniapp pinia安装及使用中的 3新建pinia store目录，并创建相关文件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  名字自己定我的是pinia-store,在目录下新建index.js和login.js，代码如下
  index.js

  import { createPinia } from 'pinia'
  
  const store = createPinia()
  
  export default store
  

  login.js

  import { defineStore } from 'pinia'
  
  export const useloginStore = defineStore({
    id: 'login', // id必填，且需要唯一
    state: () => {
      return {
        userName: uni.getStorageSync('userName') ? uni.getStorageSync('userName') : '未登录'
      }
    },
    // actions 用来修改 state
      actions: {
        login(userName) {
        	uni.setStorageSync('userName', userName)
        	this.userName = userName
        },
        logout() {
        	uni.clearStorage()
        	this.userName = '已退出登录'
        }
      }
  })
  

  对比vuex的store/index.js
  注意：如果只使用pinia这段代码可以没有

  import { createStore } from "vuex"
  
  const store = createStore({
  	state: {
  		"userName": uni.getStorageSync('userName') ? uni.getStorageSync('userName') : '未登录'
  	},
  	mutations: {
  		MLOGIN(state, userName) {
  			uni.setStorageSync('userName', userName)
  			state.userName = userName
  		},
  		MLOGOUT(state) {
  			uni.clearStorage()
  			state.userName = '已退出登录'
  		}
  	},
  	actions: {
  		login(context, userName) {
  			context.commit('MLOGIN', userName)
  		},
  		logout(context) {
  			context.commit('MLOGOUT')
  		}
  	}
  })
  
  export default store
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^